8.1 Propriété animation-iteration-count
Les animations CSS permettent de créer des effets visuels dynamiques, améliorant l'interface utilisateur. Maintenant, on va
aborder deux propriétés clés qui contrôlent les cycles d'animations : animation-iteration-count et animation-direction.
La propriété animation-iteration-count définit combien de fois une animation sera reproduite. Cette propriété permet
de contrôler si l'animation se jouera une seule fois, plusieurs fois, ou à l'infini.
Syntaxe :
element {
animation-iteration-count: number | infinite;
}
Où :
number: nombre de reproductions de l'animation (par exemple, 1, 2, 3, etc.)infinite: l'animation se répétera indéfiniment
Exemple :
<div class="box"></div>
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Explication du code :
@keyframes bounce: définit une animation qui soulève l'élément vers le haut puis le ramène à sa position d'origineanimation-iteration-count: infinite: définit une répétition infinie de l'animation
8.2 Propriété animation-direction
La propriété animation-direction détermine la direction de reproduction de l'animation. Elle permet de spécifier
si l'animation se jouera en avant, en arrière, ou alternera entre les deux directions.
Syntaxe :
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Où :
normal: l'animation se joue en direction avant (par défaut)reverse: l'animation se joue en direction arrièrealternate: l'animation alterne entre direction avant et arrièrealternate-reverse: l'animation commence par la direction arrière, puis alterne entre arrière et avant
Exemple
Reproductions avant et arrière :
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
Explication du code :
.box1: l'animation se joue en direction avant.box2: l'animation se joue en direction arrière
Alternance des directions :
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
Explication du code :
.box1: l'animation alterne entre direction avant et arrière.box2: l'animation commence par la direction arrière, puis alterne entre arrière et avant
8.3 Exemple d'utilisation des deux propriétés
Élément oscillant
- Ce exemple montre un élément oscillant se déplaçant à droite et à gauche :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Élément oscillant</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
@keyframes swing: définit une animation qui fait tourner l'élément.box: élément avec l'animationswingappliquée, d'une durée de 1 seconde, reproduction infinie, et commençant par la direction arrière
GO TO FULL VERSION