html

Animations in CSS

For the purpose of beautifying your web design, adding animations is highly recommended. Animations are referred to as a smooth shift in the element style. CSS allows you to add animations to various elements with great ease.

When applying animations to various CSS elements you must state some keyframes for the animation. The @keyframes rule specifies that an element will change its present style to the one specified at particular times. Moreover, you have to attach an animation to a particular element for the animation to work.

There are various CSS animation properties that are used for the purpose of adding animations to various CSS elements, we have discussed these properties below.

CSS Animation Properties

CSS provides various animation properties which are explained in detail below.

animation-name

This property is used to define a name for the @keyframes.

Syntax

animation-name: none | keyframename | initial | inherit;

The keyframename parameter defines a name for the keyframe that you desire to attach to an element.

Example
Consider the example below to understand how this property works.

HTML

<p>Hello World</p>

Here we have defined a <p> element on which we will apply the animation effect.

CSS

p {
  font-size: 30px;
  position: relative;
  animation-name: animation;
  animation-duration: 5s;
}
@keyframes animation {
  from {left: 0px;}
  to {left: 200px;}
}

Before applying the animation effect we have first set the font size, and position of the paragraph. Later, we have assigned the keyframes a name and using the @keyframes rule, we are defining that the animation will make the paragraph move from 0px to 200px from the left.

Note that it is important to set the animation duration otherwise it will not work.

Output

The animation is working properly.

animation-duration

This property defines the time an animation should take to finish one cycle.

Syntax

animation-duration: time | initial | inherit;

The time parameter defines the time of the animation.

Example
Here is how you can set the duration of an animation.

HTML

<div></div>

We have simply defined a div element.

CSS

div {
  width: 100px;
  height: 100px;
  background-color: brown;
  position: relative;
  animation-name: animation;
  animation-duration: 3s;
}
@keyframes animation {
  from {left: 0px;}
  to {left: 200px;}
}

Apart from styling the div container, we have set the animation duration to 3 sec. This means that the animation will continue to play for 3 seconds.

Output

The animation is being played for 3 seconds.

animation-delay

This property defines the waiting period before the animation begins.

Syntax

animation-delay: time | initial | inherit;

The time parameter defines the waiting time before the animation starts, however, it is optional.

Example
Suppose you want to delay your animation for 2 seconds then follow the code below.

CSS

div {
  width: 100px;
  height: 100px;
  background-color: brown;
  position: relative;
  animation-name: animation;
  animation-duration: 5s;
  animation-delay: 2s;
}
@keyframes animation {
  from {left: 0px;}
  to {left: 200px;}
}

The above code specifies that the div container will move from 0px to 200px from the left for 5 seconds after a waiting period of 2 seconds.

Output

The animation was delayed for 2 seconds and then started as desired.

animation-timing-function

This property defines the acceleration curve of the animation.

Syntax

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier (n,n,n,n);

All the parameters are explained below.

  • ease: The animation occurs in a slow-fast-slow fashion.
  • linear: The animation will have the same speed from starting to end.
  • ease-in: The animation will have a slow beginning.
  • ease-out: The animation will have a slow ending.
  • ease-in-out: The animation will have a slow beginning as well as a slow end.
  • cubic-bezier (n,n,n,n): The values of the animation will be set in a cubic-bezier manner.

Example
The example below shows the ease parameter of the property under discussion.

CSS

div {
  animation-name: animation;
  animation-duration: 5s;
  animation-timing-function: ease;
}
@keyframes animation {
  from {left: 0px;}
  to {left: 200px;}
}

We have set the value of the animation-timing-function to ease, therefore, the animation will occur in a slow-fast-slow manner.

Output

The animation is playing in a slow-fast-slow fashion.

animation-iteration-count

This property defines how many times an animation will play.

Syntax

animation-iteration-count: number | infinite | initial | inherit;

The number parameter defines the number of times an animation will be played, meanwhile, the infinite parameter defines that the animation will play infinitely.

Example
Let’s understand the working of the animation-iteration-count property using the following example. 

CSS

div {
  animation-name: animation;
  animation-duration: 5s;
  animation-iteration-count: 2;
}
@keyframes animation {
  from {top: 0px;}
  to {top: 100px;}
}

The code above defines that the animation will make the div container move from 0px to 100px from the top for 5 seconds twice.

Output

The animation is being played twice as specified in the code.

animation-direction

This property defines the direction in which the animation will move. Directions can be forward, backward, or switch between both.

Syntax

animation-direction: normal | reverse | alternate | alternate-reverse | inherit | initial;

All the parameters are explained below.

  • normal: This is a default parameter that plays the animation forwards.
  • reverse: This parameter plays the animation in the reverse direction.
  • alternate: This parameter plays the animation first in the forward direction, and then in the reverse direction.
  • alternate-reverse: This parameter plays the animation first in the reverse direction and then the forward direction.

Example
The example below demonstrates the alternate-reverse parameter of the animation-direction property.

HTML

<h1>Hello World</h1>

We have created a heading.

CSS

h1 {
  color: brown;
  position: relative;
  animation-name: animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}
@keyframes animation {
  from {left: 0px; color: brown;}
  to {left: 100px; color: yellow;}
}

The above code states that the heading will move infinitely for 3 seconds from 0px to 100px from the left in an alternate-reverse fashion switching between the colors brown and yellow.

Output

The animation-direction property was implemented successfully.

animation-fill-mode

This property defines the style of an element at the time when the animation is not playing. This means what style the element will have either before the animation begins, after it finishes, or both.

Syntax

animation-fill-mode: none | forwards | backwards | both | inherit | initial;

All the parameters are explained below.

  • none: This is a default parameter that gives style to the element either before or after the animation occurs.
  • forwards: This parameter keeps the style of an element defined by the last keyframe.
  • backwards: This parameter keeps the style of an element defined by the first keyframe and holds on to this style during the delay time of the animation.
  • both: This parameter switches between the forwards and backwards parameters.

Example
Let’s see how the forwards parameter works by following the example below.

HTML

<div></div>

We have simply created a div container.

CSS

div {
  width: 100px;
  height: 100px;
  background-color: brown;
  position: relative;
  animation-name: animation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
@keyframes animation {
  from {left: 0px;}
  to {left: 100px; background-color: yellow;}
}

In the above code, we have set the animation-fill-mode property to forwards parameter, therefore, the div container will retain the style specified in the last keyframe when the animation is stoppped and not playing.

Output

The div container has a yellow background color when animation is stopped and not playing.

animation-play-state

This property defines if the animation is executing or paused.

Syntax

animation-play-state: running | paused | inherit | initial;

The running parameter is a default value that specifies that animation is executing, meanwhile the paused parameter specifies that the animation is paused.

Example
Suppose you want to pause an animation using the animation-play-state property. Here is how you do it.

CSS

div {
  animation-name: animation;
  animation-duration: 3s;
  animation-play-state: paused;
}
@keyframes animation {
  from {left: 0px;}
  to {left: 100px;}
}

The above code specifies that the animation will be paused.

Output

The animation was paused successfully.

animation

This property is a shorthand property for all of the above properties.

Syntax

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

Example
Consider the example below to understand the animation property. 

CSS

div {
  animation: animation 3s infinite alternate;
}
@keyframes animation {
  from {left: 0px; background-color: brown;}
  to {left: 200px; background-color: yellow;}
}

We are specifying that the animation will play infinitely for 3 seconds in an alternate fashion.

Output

The animation property is working properly.

Conclusion

Animations are referred to as a gradual change in the style of an element. CSS provides various animation properties which are as follows: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation. All of these properties are used to specify the behavior of the animation effect being applied on various HTML elements. In this guide, all of these properties are explained with the help of relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.