Une animation en CCS correspond au fait que les styles d'une balise sont modifiés automatiquement à partir de valeurs de départ et d'arrivée (éventuellement intermédiaires).
Une animation en CSS nécessite trois éléments :
- dans le code html : la balise dont on souhaite animer les styles,
- dans le code CSS : la règle @keyframes qui permet de définir les étapes de l'animation (les valeurs de départ, intermédiaires et d'arrivée des styles),
- dans le code CSS : l'association de l'animation à la balise et le paramétrage de l'animation (durée, nombre de répétition...).
| animation-delay | Délai avant le démarrage de l'animation | Durée en s ou ms. Ex : 2s |
|---|---|---|
| animatin-direction | Sens de lecture del'animation | normal | reverse | alternate | alternate-reverse |
| animation-duration | Durée de l'animation | Durée en s ou ms. Ex : 4s |
| animation-iteration-count | Nombre de répétition de l'animation | infinite | <number> |
| animation-name | Nom de l'animation. | Choisi par le programmeur |
| animation-timing-function | Mode d'écoulement du temps (ex : démarrage accéléré...) | linear | ease | ease-in | ease-out | ease-in-out |
| animation-fill-mode | Style à appliquer avant et après l'animation | none | forwards | backwards | both |