CSS Property animation-direction

The associateimation-direction property specifies whether or not or not an animation ought to play in reverse on some or all cycles or iterations.

You can specify one or multiple comma-separated animation-direction values. once 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-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 price in a very list of values has its own index. Then, every price in a very list of prices is mapped to its corresponding value with identical index within the list provided within the alternative properties.

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

The animation-direction property is helpful and frequently employed in conjunction with the animation-iteration-count property. The latter specifies what percentage times associate animation cycle is to be continual before the animation ends, and once a cycle is continual over once, it’s helpful to permit the animation to play from the top back to the start to avoid a “jumping” behavior between cycles. See the animation-iteration-count property entry for details, and therefore the live demo section below.

The animation-direction property is sometimes given as a part of the animation shorthand property.

Examples

.class {
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Desktop Browser Support

Mobile Browser Support

One comment

  1. F*ckin¦ awesome issues here. I am very glad to see your article. Thank you so much and i’m looking forward to touch you. Will you kindly drop me a mail?

Leave a Reply