Learn the Front-end Beta

animation-duration

Draft

The animation-duration property in CSS is used to specify the duration or length of time an animation should take to complete one cycle. It’s one of the key properties used in CSS animations. The value for this property can be specified in seconds (s) or milliseconds (ms).

If animation-duration is not specified, the default value is 0, meaning there will be no animation.

Here’s a simple example:

div {
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  from {
    background-color: red;
  }

  to {
    background-color: yellow;
  }
}

In this example, the animation will gradually change the background color of the div from red to yellow over a period of 2 seconds.

Related posts