animation-duration

jameskeezer's avatar
jameskeezer's avatar
jameskeezer
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

Contribute to Docs

Learn CSS on Codecademy