![]() In the above examples, we’ve assigned just one value to animation-iteration-count, but this property (as well as other CSS animation properties) can handle multiple values as well. Multiple Values for animation-iteration-count If inherit is specified, animation-iteration-count will inherit the value from the parent element. ![]() The initial value sets the value of animation-iteration-count to its default, 1. See the Pen animation-iteration-count: decimal by Christina Perricone ( on CodePen. For example, a value of 2.5 will cause the animation to cycle two and a half times. You can also use a decimal to stop the animation before completing its final cycle. A value of 0 prevents the animation from playing. If a value for animation-iteration-count is not specified, this value defaults to 1, and the animation will cycle once. See the Pen animation-iteration-count: number by Christina Perricone ( on CodePen. For example, a value of 3 will cause the animation to cycle three times. See the Pen animation-iteration-count: infinite by Christina Perricone ( on CodePen.Ī numeric value for animation-iteration-count causes the animation to repeat the stated number of times. This is the best value for an animation that you don’t want stopping on its own. If assigned an animation-iteration-count value of infinite, the animation will repeat infinitely. Its main values are infinite and, and the property also accepts the global values initial and inherit. The animation-iteration-count property can take several values. ![]() The rule is written as follows:Īnimation-iteration-count: infinite | | initial | inherit ![]() If the iteration count is finite, the animation will stop after the specified number of cycles. The animation-iteration-count CSS property specifies how many times an animation sequence will play. It might have one of the longer names among CSS properties, but animation-iteration-count isn’t too difficult to understand, and once you know how it works you can create repeating animations to engage page viewers. So, what if we want our animation to repeat several times, or infinitely for something like a loading animation? To do that, we’ll need to set a number of iterations with the animation-iteration-count property. By default, an animation will occur once, then stop. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |