animation

The animation property allows an element to gradually change from one style to another over a given period of time. Each animation needs to be defined with the @keyframes.

Syntax

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Here, the value for duration is required while other values are optional.

Example

animation: 3s linear 1s infinite running slidein;

Property Values

name: sets the name of its corresponding keyframe.

duration: sets the time period of the animation.

timing-function: sets the speed curve of the animation.

delay: sets a delay before the animation starts.

iteration-count: sets the number of times the animation should be played.

direction: sets the direction of the animation after the cycle.

fill-mode: sets what values are applied before/after the animation.

play-state: play/pause the animation.