Conteúdo do Curso
Advanced CSS Techniques
Advanced CSS Techniques
Controlling Animation Play Quantity 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.
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:
index
index
index
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.
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.
index
index
index
Obrigado pelo seu feedback!