BlogsDope image BlogsDope

CSS animation

March 20, 2021 CSS ANIMATION 1377

The animation property allows you to give animations to HTML elements. Animations in CSS allow you to change the state of an element.

It is a shorthand property for eight animation properties - animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

CSS

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

There is no specific order in which the values are given in the declaration, except the order of animation-duration and animation-delay. Therefore, whenever two time values are given to the shorthand property, the first value corresponds to the animation duration and the second value corresponds to the animation delay. Also, it is not necessary to give all the values.

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Note: For animations to be effective, it is necessary to define the animation-duration property because the duration of animations is zero by default.

Values

The possible values which can be given for these longhand properties are given below.

animation-name

This is used to specify the name(s) of one or more animations defined by @keyframes rules to be applied to the specified element. It can take one of the following values. Its default value is none.

<animation_name> | none 

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

animation-duration

This is used to specify the time that an animation takes to complete one cycle. It is used to speed up or slow down animations. It can take the following value. Its default value is 0s.

<time>

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

animation-timing-function

This is used to define the pattern of speed of the animation applied to an element over time by specifying a speed curve function. It allows you to define how the speed of an animation will change in one cycle. It can take one of the following values. Its default value is ease.

ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<int>, start|end) | cubic-bezier(<n,n,n,n>)

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

animation-delay

This is used to specify the time after which an animation starts. It can take the following value. Its default value is 0s.

<time>

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

In the above demo, 2s is the animation-duration value and the values written after it specify the animation-delay values.

animation-iteration-count

This is used to specify the number of times an animation cycle plays. It can take one of the following values. Its default value is 1.

<number> | infinite

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

animation-direction

This is used to specify whether an animation plays forwards, backwards or a combination of the two. It can take one of the following values. Its default value is normal.

normal | reverse | alternate | alternate-reverse

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

animation-fill-mode

This is used to specify the styles to be applied to the specified element when the animation is not being played, i.e., before the start and after the end of the animation. It can take one of the following values. Its default value is none.

none | forwards | backwards | both

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

animation-play-state

This is used to specify whether an animation is running or paused. Its default value is running.

running | paused

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Apart from these, the animation property can also take the following universal values.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Example

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

The declaration used in the above demo is equivalent to the following individual declarations.

animation-name: move;
animation-duration: 4s;
animation-timing-function: ease;  /* default value */
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: none;  /* default value */
animation-play-state: running;  /* default value */

Giving different animations to an element

To give multiple animations, give multiple comma-separated set of values to the animation property.

Look at the following code.

HTML

<div></div>

CSS

@keyframes slide {
@keyframes reshape{
  0% { border-radius: 50%; }
  50% { border-radius: 0%; }
  100% { border-radius: 50%; }
}

@keyframes colorChange{
  0% {background-color: green;}
  0% {background-color: yellow;}
  100% {background-color: green;}
}

div {
  width: 150px;
  height: 150px;
  background-color: #8f5656;
  border-radius: 50%;
  -webkit-animation: reshape 1s,   /* first animation */
  		     colorChange 2s infinite;   /* second animation */
  animation: reshape 1s,   /* first animation */
  	     colorChange 2s infinite;   /* second animation */
}

In this code, two animations named "reshape" and "colorChange" are defined. These two animations are given to a div by giving a set of values for each animation separated by a comma to the animation property.

See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation from beginning.

Browser Support

This property is not supported in IE 10 and its earlier versions.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).