Animating the elements in CSS:


 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