CSS Property animation-name

The animation-name property is employed to specify one or additional names of animations outlined by @keyframes rules, that ar to be applied to the chosen part.

A @keyframes rule specifies the property values that ar to be animated over a sequence of animation keyframes.

You can specify either one animation name in animation-name or an inventory of comma-separated names. every name belongs to a @keyframes symbol. If the animation name nominal mistreatment animation-name doesn’t exist, no animation is applied.

When you offer an inventory of comma-separated animation names, this list is typically mapped to an inventory of values provided by different animation-related properties, like the animation-delay, animation-timing-function, and animation-duration properties, among others. every list of values in these properties is treated quite like associate array, wherever every worth in a very list of values has its own index. Then, every worth in a very list of worths is mapped to its corresponding value with constant index within the list provided within the different properties.

The animation-name property is typically set as a part of the animation shorthand property.

The animation applied to part are often controlled mistreatment the various animation properties, together with what number times the animation iterates, whether or not or not it alternates between the begin and finish values, and whether or not or not the animation ought to be running or paused. associate animation also can delay its begin time.

Examples

animation-name: bounce;
animation-name: shake, jump;
animation-name: some-animation-name;

Desktop Browser Support

Mobile Browser Support

Leave a Reply