Animate Elements Continually Using an Infinite Animation Count:
The previous challenges covered how to use some of the animation properties and the @keyframes rule.
Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation. Here's an example:
animation-iteration-count: 3;
In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.
Make a CSS Heartbeat using an Infinite Animation Count:
Here's one more continuous animation example with the animation-iteration-count property that uses the heart you designed in a previous challenge.
The one-second long heartbeat animation consists of two animated pieces.
The heart elements (including the :before and :after pieces) are animated to change size using the transform property, and the background div is animated to change its color using the background property.
No comments:
Post a Comment