CSS animations - Everything you must know

 

Don't you want your website to seem more attractive and user loving? I am sure you want to. Make your website alive with some cool animation effects. Don't worry about the resource. I am here to teach you how to apply CSS animations to create amazing animations.

CSS animations:

CSS animations make it possible to animate an HTML element through the transition of CSS styles without the use of Javascript. Let's take an instance. You want to create a text that glows or a card that flips on hovering. How can you do that? Yes, you are thinking right. CSS animations can help you. So, you should have the basic knowledge of using CSS animations. So, I am going to discuss how you can apply CSS animations with some great examples.

How to use:

To create CSS animations, you need to learn some properties. The CSS properties are-

1. @keyframes,
2. animation-name,
3. animation-duration,
4. animation-delay,
5. animation-direction,
6. animation-iteration-count,
7. animation-timing-function,
8. animation-fill-mode,
9. animation

@keyframes and animation-name:

Defining @keyframes is the most important step in creating CSS animations. You have to specify the styles you want to change from one to another under @keyframes to create the animation. You have to define the animation-name so that you can use it in @keyframes and it should be defined in the particular element style. I am giving a basic example of writing the @keyframes.

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

The duration of the animation:

The animation-duration property defines how long the animation should be continued. You must specify its value. If you don't, there will be no animation as its default value is zero. Now, you have noticed that in @keyframes, I have mentioned the styles I want to change from one to another. But, the change will take place gradually. If you want to show a particular style for a particular time, there is a trick for that?

 You can divide the duration into some intervals. Just check the following example to understand how you should apply this.

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

The delay of animation:

You can delay the start of the CSS animations with animation-delay property. You need to specify the amount of time you want to get it delayed. There is another awesome trick with animation-delay. Like, if you want your animation to start at a moment as it had already been playing, you can do that. You will have to specify a negative amount of time as the value of the animation-delay property. Add animation-delay: 2s; in the above code for a clear understanding.

Read more Master CSS transitions in a few minutes

The number of repetition of the animation:

You can declare how many times you want to repeat the animation as well. The animation-iteration-count property specifies the number of iteration. Play with the code given below to check how it works. You can set the value to infinite to make the animation to continue for forever.

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

The direction of the animation:

You can specify the direction of CSS animations with the animation-direction property. Like, if you want to play the animation in reverse order or alternating between forward and reverse, you can do it. The animation-direction property can have these four values-

1. normal: plays the animation in the forward direction (normal).
2. reverse: plays the animation in the reverse direction.
3. alternate: plays forward first then reverse.
4. alternate-reverse: plays reverse first then forward.

I am giving an example so that you can understand it clearly.

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

The fill-mode of the animation:

The animation-fill-mode specifies the style of the element when it is not playing. It can have four different values-

1. none: It is the default value. The animation will not apply any style to the element before and after the playing.
2. forwards: if you apply this, the element will retain the styles set by the last keyframe.
3. backwards: if you apply this, the element gets the styles set by the first keyframe and retains in the delay period.
4. both: This will follow both forwards and backwards.

Check the following code for getting a clear overview of the difference.

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

The speed curve of the animation:

You can control the speed curve in CSS animations as well. The animation-timing-function specifies the speed curve of the animation. This property can have these values-

1.  ease: It specifies the animation with a slow start, fast in the middle, and slow at the end. It is the default value.
2. linear: It specifies the animation at the same speed from start to end.
3. ease-in: It specifies the animation with a slow start.
4. ease-out: It specifies the animation with a slow end.
5. ease-in-out: It specifies the animation with a slow start and ends both.
6. cubic-bezier(x,x,x,x): You can define the value of x to get a cubic-bezier curve as you wish.

Check the following example.

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

The animation property:

The animation property is a shorthand property that allows you to define the duration, the delay, the direction, and other property values in a single property. Find the example given below.

div {

  animation-name: name;

  animation-duration: 4s;

  animation-timing-function: linear;

  animation-delay: 2s;

  animation-iteration-count: 2;

  animation-direction: reverse;

}

div {

  animation: name 4s linear 2s 2 reverse;

}

Now, you can understand how easy and time-saving it would be to use the animation property.

Browser support:

Congratulations on mastering the CSS animations property. What are waiting for? Make your hands dirty with some coding for creating your first CSS animations. 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 😎.