Master CSS transitions in a few minutes !

 

Ask yourself, don't you want your website to seem attractive and users to love it? I am sure you want to. Apply some cool CSS animation effect to make your website alive. I am here to teach you how to apply CSS transitions for creating some amazing animation effects.

CSS Transitions:

First, you need to know what CSS transitions is and what it can do for you before applying it. CSS transitions allows you to create smooth change or transition of a CSS property, over a given duration. Let's take an instance. You want an HTML element to be larger than previous on hover. If you just set its height and width to the value you want, you will find that on hover the element becomes larger on a sudden. Do you want this? Doesn't it look a bit odd? Now, think if it changes smoothly how it would be. It would look good, right. So, how can you do so? Yes, you are right. CSS transitions can help you to create this effect. So, be ready to learn how to apply it to your website.

How to use:

To apply the CSS transitions, you need to learn five properties. They are-

1. transition,
2. transition-delay,
3. transition-duration,
4. transition-property,
5. transition-timing-function

I will discuss each property with examples and showing its effectiveness. Let's discuss one by one.

transition:

To create a transition effect, you must specify two things. First, the property you want to make a transition, and second, the duration of the transition. Note that if you don't specify the transition duration, it will set to the default value 0 and no transition effect will be there. So, be careful about that. Now, to understand how to apply it check the following example given below and the explanation.

See the Pen qBZpRwP by KAMAL DAS (@daskamal)on CodePen.

Here, I wanted a transition of the width of the <div> from 100px to 300px. So, I have added the transition property and set the target property to width. I wanted to continue the transition for 2s so I have set the duration value of transition property to 2s. So, whenever the width changes it shows the transition.

transition-delay:

You can set the delay for the transition effect as well. To use it, you have to add the transition-delay property to the element. You can notice the effect of this property by adding transition-delay: 2s; in .check class in the above example.

Read more CSS positions: Everything you must know

transition-property:

This property is for telling the browser, on which property of the element you want to show the transition effect. You have learned how I specified in the above example where the transition-property was 'width'. You don't need to add this property if you have already set it in the transition property.

transition-duration:

Like transition-property, you can set transition duration exclusively with this property as well and you don't need to apply it if you have already set it.

transition-timing-function:

This property is a little bit trickier. If you want to change the transition speed at different times, this function can be useful. There are mainly two types of timing-functions with more divisions as well. First, cubic-bezier and second, step function.

You can find the details with examples below.

Cubic-bezier:

The five non-step keyword values represent the cubic-bezier curve with fixed four-point values with cubic-bezier() function with non-predefined value. The five non-step keyword values are-

1.  ease: It specifies the transition with a slow start, fast in the middle, and slow at the end. It is the default value.
2. linear: It specifies the transition at the same speed from start to end.
3. ease-in: It specifies the transition with a slow start.
4. ease-out: It specifies the transition with a slow end.
5. ease-in-out: It specifies the transition with a slow start and end both.

The function is-

1. cubic-bezier(x,x,x,x): You can define the value of x to get a cubic-bezier curve as you wish.

I am providing an example showing how these values work so that you can understand the difference well. To see that change hover on an element.

See the Pen cubic-bezire by KAMAL DAS (@daskamal)on CodePen.

Step-function:

This function divides the input duration time into specified equal length intervals. It is defined by the number of steps and the position of the steps. So, let's check how you can define a step function.

1. steps(n,position): You can display the transition along n stops displaying each stop for equal time. The positions of the stops are defined by some keywords. The position keywords are- 

   1. jump-start: It denotes a left-continuous function and the first jump happens when the transition begins.

   2. jump-end: It denotes a right-continuous function and the last jump happens when the transition lasts.

   3. jump-both: It causes the jump at the start and ends both.

   4. jump-none: it causes no jump in either end.

2. step-start: It is the same as steps(1,jump-start).
3. step-end: It is the same as steps(1,jump-end).

I am adding an example to make it clear how this all step functions differed. Hover on the elements to understand the effect.

See the Pen steps function by KAMAL DAS (@daskamal)on CodePen.

By the way, you don't need to write the transition-delay and transition-timing-function property if you add their values in the transition property. I am giving an example.

div { transition: width 2s ease-in 1s; }

Here, the last time specifies the delay of the transition.

Congratulations on mastering the CSS transitions property. What are waiting for? Make your hands dirty with some coding for creating your first transitions. If you have any doubts or found anything wrong, let me know through your comments. If you like this article, please share and follow the blog for getting more new posts.

Happy coding 😎.