BlogsDope image BlogsDope

CSS animation-duration

March 20, 2021 CSS ANIMATION 1485

The animation-duration property is used to specify the time that an animation takes to complete one cycle. It is used to speed up or slow down animations.

CSS

animation-duration: value;

Animations in CSS allow you to change the state of an element. While the animation-duration property is used to specify the duration of animations, there are other animation properties as well like animation-name, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

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

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

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

time : Specifies the time in seconds (written in s) or milliseconds (written in ms) for which an animation takes place. The default animation duration is 0s.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

In the following example, an animation named "slide" is defined using @keyframes which changes the left margin from 0 to 70px during the animation. On giving "slide" to the animation-name property applied to three div elements, the left margin of the three elements changes from 0 to 70px.

The time which the animation takes for the respective blocks is set to 2 seconds, 3 seconds and 4 seconds using the animation-duration property. The prefix -webkit- is used for better browser support.

HTML

<div id="dur1">Duration - 2s</div>
<div id="dur2">Duration - 3s</div>
<div id="dur3">Duration - 4s</div>

CSS

@keyframes slide {
  from {margin-left: 0px;}
  to {margin-left: 200px;}
}

div {
  width: 100px;
  height: 100px;
  background-color: #007399;
  margin-top: 10px;
  -webkit-animation-name: slide;
  animation-name: slide;
}

#dur1 {  /* duration for 1st block */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

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

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

Giving different durations for different animations

If multiple animations are applied to an element, then you can define different durations for different animations.

If only one value is given to the animation-duration property, then it decides the duration of all the animations applied to the specified element. To give them different durations, give multiple comma separated values to the animation-duration property corresponding to the respective comma separated animation names given to the animation-name property.

Look at this code.

CSS

animation-name: reshape, colorChange;
animation-duration: 90ms, 4s;

In this code, the durations of the animations named "reshape" and "colorChange" are 90 milliseconds and 4 seconds respectively.

Look at this code in effect in the following demo.

HTML

<div></div>

CSS

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

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

div {
  width: 150px;
  height: 150px;
  background-color: #8f5656;
  border-radius: 50%;
  -webkit-animation-name: reshape, colorChange;
  animation-name: reshape, colorChange;
  -webkit-animation-duration: 1s, 7s;
  animation-duration: 1s, 7s;
}

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

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

Browser Support

This property is supported in all the major browsers.


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).