CSS Animation

Animations make it possible to animate transitions from one CSS style configuration to another.

There are a few key advantages to CSS animations over traditional script-driven animation techniques:

They’re easy to use for simple animations; you can create them without even having to know JavaScript.
The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript.

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously.

The animation shorthand css property applies an animation between styles.

The animation property is specified as one or more single animations, separated by commas.

At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign, ‘@’.Â
The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence.
We can’t animate anything if we don’t have the @keyframes specified.

<custom-ident> – a name identifying the keyframe list.Â
from – a starting offset of 0%.
to – an ending offset of 100%.
<percentage> – a percentage of the time through the animation sequence at which the specified keyframe should occur.

In this example the style for the <p> element specifies that the animation should take 3 seconds to execute from start to finish, using the animation-duration property, and that the name of the @keyframes at-rule defining the keyframes for the animation sequence is named “slidein”.

Making it repeat

To make the animation repeat itself, use the animation-iteration-count property to indicate how many times to repeat the animation.