Points communs
Les animations (animation) et les transitions (transition) en CSS permettent toutes deux de créer des effets dynamiques. Elles partagent les propriétés suivantes :
animation: mouv 2s linéaire infini alterné;
transition: largeur 1s ease-out;
- Nom de l'animation (défini via
@keyframes) - Durée : spécifie le temps nécessaire pour compléter un cycle (en secondes ou millisecondes). Par défaut : 0.
- Délai : indique quand l'animation démarre.
- Fonction de temporisation : contrôle la courbe de vitesse. La valeur par défaut est
ease.
| Valeur | Description |
|---|---|
linear |
Vitesse constante du début à la fin. |
ease |
Début lent, accélération, ralentissement final (défaut). |
ease-in |
Début lent seulement. |
ease-out |
Fin lente seulement. |
ease-in-out |
Début et fin lents. |
cubic-bezier(n,n,n,n) |
Courbe personnalisée (valeurs de 0 à 1). |
Différences clés
Les animations CSS offrent des propriétés supplémentaires non disponiblse avec les transitions :
1. Nombre de répétitions (iteration-count)
animation: mouv 2s linéaire infini;
Paramètres :
- n : répéter n fois.
infinite: répétition sans fin.
2. Direction de lecture (direction)
animation: mouv 2s linéaire 1 alterné;
Paramètres :
normal: lecture normale (défaut).alternate: lecture avant puis arrière à chaque cycle.reverse: lecture inversée.
3. État hors animation (fill-mode)
animation-fill-mode: none | forwards | backwards | both;
| Valeur | Description |
|---|---|
none |
Comportement par défaut. |
forwards |
Conserver le style de la dernière image clé après animation. |
backwards |
Appliquer le style de la première image clé pendant le délai. |
both |
Appliquer à la fois forwards et backwards. |
4. Mise en pause (play-state)
animation-play-state: paused | running;
De plus, les animations corrigent les problèmes de compatibilité entre les transitions et la propriété display.
Exemple de mise en œuvre
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
.boite-anim {
largeur: 100px;
hauteur: 100px;
fond: #2a6496;
transition: transform 1s ease-out;
}
.boite-anim:hover {
transform: rotation(90deg);
}
.boite-mouv {
largeur: 200px;
hauteur: 200px;
fond: #d9534f;
}
.boite-mouv:hover {
animation: glissement 2s linéaire infini alterné;
}
@keyframes glissement {
100% {
transform: translationX(200px)
}
}
</style>
</head>
<body>
<div class="boite-anim">Transition</div>
<div class="boite-mouv">Animation</div>
</body>
</html>