Controlling Animation Iteration and Direction

animation-iteration-count property

We can control how many times an animation is supposed to be played. animation-iteration-count sets the number of times the animation will be repeated.

css
animation-iteration-count: number_without_units

We also can specify the keyword infinite as a value. So, the animation will always process. Let's consider the following example and check how we can affect the number of animations:

animation-direction property

animation-direction controls the direction of the animation. It determines whether an animation should play forwards, backwards, or alternate forward and backward.

css
animation-direction: normal | reverse | alternate | alternate-reverse

• normal - default value. The animation will play forwards from the beginning to the end;

• reverse - The animation will play backwards from the end to the beginning;

• alternate - The animation will play forwards and then backwards, alternating between the two directions;

• alternate-reverse - The animation will play backwards and forwards, alternating between the two directions.

Let's see what effect we can achieve in the following example. We will have an image in which the default behavior is to repeatedly move from the left side to the right. However, we can change its behavior. We will test all four values for the animation-direction property.