animation-duration

Published Jul 1, 2021Updated May 15, 2024
Contribute to Docs

Defines how long an animation should take to complete.

Syntax

animation-duration: <value>;

where <value> can be one of the following:

  • Seconds: 2s
  • Milliseconds: 200ms

Note: If not provided, an animation will not occur because the default value is 0s.

Example 1

Change color of box from blue to white over a duration of 2 seconds:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-name: disappear;
animation-duration: 2s;
}
@keyframes disappear {
from {
background-color: blue;
}
to {
background-color: white;
}
}

The following gif runs as a loop to demonstrate the code block above:

Animation showing blue background transitioning to white over 2 seconds

Example 2

Provide a second duration value to determine the duration of an additional animation:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-name: fadeoutfadein, slideleft;
animation-duration: 4s, 5000ms;
}
@keyframes fadeoutfadein {
0% {
background-color: blue;
}
50% {
background-color: white;
}
100% {
background-color: blue;
}
}
@keyframes slideleft {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}

The following gif runs as a loop to demonstrate the code block above:

Animation showing blue background transitioning to white and back to blue over 4 seconds, and moving from right to left over 5000ms

All contributors

Looking to contribute?

Learn CSS on Codecademy