The automation-delay property specifies the delay of the animation. The delay is configured in seconds (s) or milliseconds (ms).


selector { 

    animation-delay: time | initial | inherit;



The values that are allowed for the animation-delay property are:

  • time; This value is optional (default value is 0) and it specifies the number of seconds or milliseconds to wait for automation to start. 
  • initialinherit

If you specify a negative value, the animation starts immediately, but at the point it would have reached at the specified offset, for instance if the animation is four seconds long, and animation-delay is set to minus two seconds, it begins halfway through, or it would start at +2 seconds.


The example with automation-delay property set to negative value:


›› go to examples ››