Animations en CSS
Qu'est-ce qu'une animation CSS ?
Une animation CSS permet à un élément HTML de passer progressivement d'un style à un autre, sans avoir recours à JavaScript. Vous pouvez modifier un nombre illimité de propriétés CSS plusieurs fois.
Les clés de l'animation : les keyframes
Pour créer une animation en CSS, il est essentiel de définir des keyframes. Ces keyframes déterminent quelles seront les propriétés CSS de l'élément à différents moments de l'animation. En précisant les styles dans la règle @keyframes
, l'animation se fera progressivement, du style actuel vers le nouveau.
Exemple d'animation
Voici un exemple d'animation où un élément <h1>
apparaît dans une couleur violette et change progressivement en jaune sur une durée de 5 secondes :
/* L'animation */
@keyframes changement-couleur {
from {
color: violet;
}
25% {
color: orange;
}
50% {
color: rouge;
}
75% {
color: bleu;
}
to {
color: jaune;
}
}
/* L'élément */
h1 {
color: violet;
animation-name: changement-couleur;
animation-duration: 5s;
}
Propriétés des animations CSS
Les animations CSS sont contrôlées par plusieurs propriétés : - @keyframes
: Gère une animation avec plusieurs étapes intermédiaires, définissant les valeurs des propriétés à chaque keyframe. - animation
: Propriété abrégée pour définir les animations d'un élément. - animation-delay
: Indique quand commence une animation. - animation-direction
: Indique si une animation se déroule dans le sens normal ou inverse sur tout ou partie de ses cycles. - animation-duration
: Définit la durée nécessaire à l'achèvement d'une animation. - animation-fill-mode
: Indique quelles valeurs sont appliquées par une animation en dehors de son temps d'exécution. - animation-iteration-count
: Définit combien de fois une animation doit s'exécuter. - animation-name
: Définit une liste d'animations à appliquer au sélecteur donné. - animation-play-state
: Indique si une animation est en cours ou en pause. - animation-timing-function
: Modèle la courbe de vitesse de l'animation.