Animations CSS

Les animations CSS permettent de faire évoluer un élément sur plusieurs étapes, de manière autonome ou répétée. Dans ce cours, nous allons les découvrir en partant de la différence avec les transitions pour arriver à la syntaxe raccourcie complète.

Différence entre une transition et une animation

Une transition accompagne le passage d'un état à un autre. Elle a besoin d'un déclencheur, comme un :hover, un :focus ou l'ajout d'une classe.

Une animation, elle, peut se lancer toute seule et suivre plusieurs étapes définies à l'avance. Elle ne se limite pas à un simple passage entre un état A et un état B.

Autrement dit, la transition est idéale pour réagir à une interaction, alors que l'animation sert davantage à construire une petite chorégraphie visuelle.

@keyframes pour définir les étapes de mon animation

Avant de lancer une animation, il faut définir son scénario. C'est le rôle de @keyframes.

Un bloc @keyframes contient les différentes étapes par lesquelles l'élément doit passer.

Le nom de la keyframe se place juste après @keyframes. Par exemple, dans @keyframes glisser, le nom de l'animation est glisser. C'est ce même nom que l'on réutilise ensuite avec animation-name.

from et to pour une animation simple

Pour une animation très simple, vous pouvez utiliser from pour le point de départ et to pour le point d'arrivée.

						
							@keyframes glisser{
								from{
									transform: translateX(0);
								}

								to{
									transform: translateX(120px);
								}
							}
						
					

						
							<div class="bloc-animation-simple"></div>
						
					

Ici, l'élément part de sa position normale et termine 120 pixels plus loin.

définir plusieurs étapes d'animation

Une animation peut aussi comporter plusieurs moments intermédiaires. Dans ce cas, on utilise des pourcentages.

				
					@keyframes rebond{
						0%{
							transform: translateY(0);
						}

						50%{
							transform: translateY(-20px);
						}

						100%{
							transform: translateY(0);
						}
					}
				
			

Avec cette méthode, vous pouvez faire varier une propriété plusieurs fois au cours d'une même animation.

animation-name pour appeler une animation

Après avoir défini un bloc @keyframes, il faut l'attacher à un élément. La propriété animation-name sert justement à appeler l'animation par son nom.

				
					.bloc{
						animation-name: rebond;
					}
				
			

Si le nom ne correspond à aucun bloc @keyframes, rien ne se passera.

animation-duration pour définir une durée

Comme pour les transitions, il faut indiquer combien de temps l'animation doit durer. C'est le rôle de animation-duration.

				
					.bloc{
						animation-name: rebond;
						animation-duration: 1s;
					}
				
			

Ici, le carré répète une animation d'une seconde.

animation-direction pour gérer le sens de l'animation

La propriété animation-direction permet de choisir dans quel sens l'animation doit être jouée.

• normal joue l'animation du début vers la fin.
• reverse la joue de la fin vers le début.
• alternate alterne un passage aller puis retour.
• alternate-reverse alterne en commençant par le retour.

				
					.bloc{
						animation-name: glisser;
						animation-duration: 1s;
						animation-direction: alternate;
					}
				
			

animation-iteration-count pour jouer une animation plusieurs fois

Par défaut, une animation se joue une seule fois. La propriété animation-iteration-count permet de décider combien de fois elle doit se répéter.

Vous pouvez utiliser un nombre comme 2, 3 ou bien le mot-clé infinite.

				
					.bloc{
						animation-name: glisser;
						animation-duration: 1s;
						animation-iteration-count: infinite;
					}
				
			

animation-delay pour définir un délai de déclenchement

La propriété animation-delay ajoute un temps d'attente avant le lancement de l'animation.

				
					.bloc{
						animation-name: glisser;
						animation-duration: 1s;
						animation-delay: 0.5s;
					}
				
			

Le délai est surtout utile quand plusieurs éléments doivent démarrer à des moments différents.

animation-fill-mode

La propriété animation-fill-mode indique comment l'élément doit apparaître avant le début de l'animation et après sa fin.

• none n'applique aucun état spécial.
• forwards conserve le dernier état atteint.
• backwards applique immédiatement le premier état pendant le délai.
• both combine les deux comportements.

Avec forwards, le rond garde sa position finale à la fin de l'animation.

animation-play-state pour contrôler une animation

La propriété animation-play-state permet de mettre une animation en lecture ou en pause.

Les deux valeurs principales sont running et paused.

						
							.bloc{
								animation-play-state: running;
							}

							.zone:hover .bloc{
								animation-play-state: paused;
							}
						
					

						
							<div class="zone">
								<div class="bloc"></div>
							</div>
						
					

Quand vous survolez la zone de démonstration, l'animation se met en pause.

animation pour combiner toutes les propriétés en une seule ligne CSS

Comme pour les transitions, on utilise souvent une syntaxe raccourcie. La propriété animation permet d'écrire sur une seule ligne le nom, la durée, la courbe, le délai, le nombre de répétitions, la direction et d'autres paramètres.

				
					.badge{
						animation: rebond 1s ease 0s infinite alternate;
					}
				
			

Quand vous débutez, il est souvent plus simple de commencer avec les propriétés séparées. Ensuite, vous pourrez les regrouper quand vous serez plus à l'aise.