Contrôle de l'Itération et de la Direction des Animations
Propriété animation-iteration-count
Il est possible de contrôler le nombre de répétitions d'une animation. animation-iteration-count définit le nombre de fois que l'animation sera répétée.
animation-iteration-count: number_without_units
Il est également possible d'utiliser le mot-clé infinite comme valeur. Ainsi, l'animation sera exécutée en continu.
Considérons l'exemple suivant pour observer comment il est possible d'influencer le nombre d'itérations d'une animation :
index.html
index.css
Propriété animation-direction
animation-direction contrôle la direction de l'animation. Elle détermine si une animation doit se jouer en avant, en arrière, ou alterner entre les deux directions.
animation-direction: normal | reverse | alternate | alternate-reverse
normal- valeur par défaut. L'animation se joue en avant, du début à la fin ;reverse- L'animation se joue en arrière, de la fin au début ;alternate- L'animation se joue en avant puis en arrière, en alternant entre les deux directions ;alternate-reverse- L'animation se joue en arrière puis en avant, en alternant entre les deux directions.
Voyons quel effet nous pouvons obtenir dans l'exemple suivant. Nous aurons une image dont le comportement par défaut est de se déplacer de façon répétée de la gauche vers la droite. Cependant, il est possible de modifier ce comportement. Nous allons tester les quatre valeurs de la propriété animation-direction.
index.html
index.css
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you show me an example of how to use animation-iteration-count and animation-direction together?
What does the animation look like with each animation-direction value?
Can you explain the difference between alternate and alternate-reverse with a visual example?
Awesome!
Completion rate improved to 2.04Contrôle de l'Itération et de la Direction des Animations
Glissez pour afficher le menu
Propriété animation-iteration-count
Il est possible de contrôler le nombre de répétitions d'une animation. animation-iteration-count définit le nombre de fois que l'animation sera répétée.
animation-iteration-count: number_without_units
Il est également possible d'utiliser le mot-clé infinite comme valeur. Ainsi, l'animation sera exécutée en continu.
Considérons l'exemple suivant pour observer comment il est possible d'influencer le nombre d'itérations d'une animation :
index.html
index.css
Propriété animation-direction
animation-direction contrôle la direction de l'animation. Elle détermine si une animation doit se jouer en avant, en arrière, ou alterner entre les deux directions.
animation-direction: normal | reverse | alternate | alternate-reverse
normal- valeur par défaut. L'animation se joue en avant, du début à la fin ;reverse- L'animation se joue en arrière, de la fin au début ;alternate- L'animation se joue en avant puis en arrière, en alternant entre les deux directions ;alternate-reverse- L'animation se joue en arrière puis en avant, en alternant entre les deux directions.
Voyons quel effet nous pouvons obtenir dans l'exemple suivant. Nous aurons une image dont le comportement par défaut est de se déplacer de façon répétée de la gauche vers la droite. Cependant, il est possible de modifier ce comportement. Nous allons tester les quatre valeurs de la propriété animation-direction.
index.html
index.css
Merci pour vos commentaires !
