CSS animation-duration

The animation-duration property specifies the duration of an animation in seconds or milliseconds. It determines how long the animation will take to complete one cycle. This property can be applied to any element that has a CSS animation applied to it.

The syntax for the animation-duration property is:

animation-duration: time;

where time can be specified in seconds or milliseconds.

Let's see an example to understand how the animation-duration property works:

@keyframes example {
  0% {background-color: red; left: 0px; top: 0px;}
  25% {background-color: yellow; left: 200px; top: 0px;}
  50% {background-color: blue; left: 200px; top: 200px;}
  75% {background-color: green; left: 0px; top: 200px;}
  100% {background-color: red; left: 0px; top: 0px;}
}

<div style="animation: example 3s infinite; animation-duration: 2s; width: 100px; height: 100px; background-color: red;"></div>

In this example, we have a square element that is animated using a @keyframes rule with a duration of 3 seconds. The animation-duration property is set to 2 seconds, which means the animation will run for 2 seconds before starting over again. The animation will loop infinitely.

You can adjust the animation-duration value to make the animation run faster or slower based on your requirements.