CSS Property animation-delay

The animation-delay property defines once the animation can begin. It permits Associate in Nursing animation to start execution it slow when it’s applied, or to seem to own begun execution it slow before it’s applied.

The initial worth is ‘0s’, which implies that the animation can begin to play as before long because it is applied to part. A positive note value represents associate offset that defines however long of a delay there’s between the beginning of the animation (when the animation is applied to the component via the animation properties) and once it begins death penalty.

You can additionally offer a negative animation-delay worth. A negative worth, a bit like ‘0s’, implies that the animation can execute instantly as before long because it is applied, however is mechanically progressed by absolutely the worth of the delay, as if the animation had started the required time within the past, so it seems to start out partway through its play-cycle already. for instance, if you offer associate animation-delay worth of ‘-2s’, the animation can begin instantly as before long because it is applied however it’ll seem as if it had started 2s before you had applied it.

If associate associateimation’s keyframes have an tacit beginning worth, the values ar taken from the time the animation starts, not your time within the past.

You can specify one or multiple comma-separated animation-delay values. after you offer a listing of comma-separated values, this list is sometimes mapped to a listing of values provided by alternative animation-related properties, like the animation-direction, animation-timing-function, and animation-name properties, among others. every list of values in these properties is treated quite like associate array, wherever every worth during a list of values has its own index. Then, every worth during a list of worths is mapped to its corresponding value with constant index within the list provided within the alternative properties.

For example, if you offer 2 animation-delay values, then the primary worth determines the delay of the primary animation within the list of animation names provided by animation-name, and also the second delay specifies the delay of the second animation.

The animation-delay property is sometimes specific as a part of the animation shorthand property.


.class {
    animation-name: bounce, shake;
    animation-duration: 2s, 1s;
    animation-delay: 1s, 0s;
    animation-timing-function: linear, ease-in;

Desktop Browser Support

Mobile Browser Support

One comment

  1. Do you have a spam problem on this site; I also am a blogger, and I was wanting to know your situation; many of us have developed some nice procedures and we are looking to trade techniques with others, be sure to shoot me an email if interested.

Leave a Reply