CSS Property animation-duration

The animation-duration property is employed to specify however long the animation cycle ought to take.

The time is laid out in seconds or milliseconds, and is at first set to ā€˜0sā€™, which implies that the animation happens outright.

You can specify one period or multiple comma-separated durations. after you give an inventory of comma-separated durations, this list is typically mapped to an inventory of values provided by alternative animation-related properties, like the animation-delay, 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 in an exceedingly list of values has its own index. Then, every worth in an exceedingly list of worths is mapped to its corresponding value with a similar index within the list provided within the alternative properties.

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

If the animation-duration worth is ā€˜0sā€™, just like the initial worth, the keyframes of the animation haven’t any result, however the animation itself still happens outright. That is, animation-fill-mode applies as traditional, filling backwards or forwards as acceptable, and animation events still fireplace.

Examples
animation-duration: 1s;
animation-duration: .3s;
animation-duration: .6s, 1.5s, 2s;
animation-duration: .3s, .6s, .9s;

Desktop Browser Support

Mobile Browser Support

Leave a Reply