The animation-duration property defines the duration of one automation cycle, and it is set as seconds or milliseconds. If multiple times are specified, they’re applied to the animations in the same order as listed for animation-name.


selector { 

    animation-duration: time | initial | inherit;



The following values may be assigned to animation-duration property:

  • time; As mentioned the time is set in seconds or milliseconds and it defines the time of one automation cycle. The default value is 0.
  • initialinherit


The example with the automation-duration property:


›› go to examples ››