@keyframes - Directive CSS
Résumé des caractéristiques de la directive @keyframes
Description de la directive @keyframes
.
@keyframes
définit le nom et les paramètres d'une animation : quelle(s) propriété(s) CSS sont
animée(s), les étapes de l'animation, etc.
L'animation définie par @keyframes
sera ensuite affectée
à un élément par les propriétés CSS animation
ou animation-name
.
Si deux animations sont définies avec le même nom, c'est la dernière qui est prise en compte :
pas de règles de priorité en cascade comme pour les propriétés.
Ce qui est logique puisque aucun sélecteur ne figure dans la syntaxe de @keyframes
.
Pour une présentation plus générale des animations en CSS, reportez-vous à la page sur la
propriété animation
.
Syntaxe de @keyframes
.
- @keyframes demo { from {prop1:valeur; prop2:valeur;...} 30% {prop1:valeur; prop2:valeur;...} ... to {prop1:valeur; prop2:valeur;...} }
Le nom choisi pour l'animation vient tout de suite après le mot
@keyframes
. Dans cet exemple le nom choisi estdemo
. Il doit respecter les règles suivantes :- Le nom peut éventuellement être spécifié entre guillemets, mais ce n'est pas obligatoire.
- La casse est prise en compte. Il est conseillé d'adopter une convention de nommage telle
que le "kebab case" pour rester homogène avec la syntaxe habituelle de CSS : tout en minucules
avec un tiret entre les mots. Exemples :
animation-menu
,rotation-logo
, etc. - Il ne doit pas comporter d'espace. Le seuls caractères autorisés sont les lettres, les chiffres, le tiret et le tiret souligné.
- Il ne doit pas commencer par un double-tiret.
- Le nom ne doit pas être
inherit
,unset
, niinitial
. En fait il est conseillé d'éviter tout nom qui aurait une signification en CSS ne serait-ce que pour des raisons de lisibilité.
Chacune des étapes de l'animation peut être introduite par un pourcentage ou par les mots
from
(équivalent à 0%) etto
(équivalent à 100%).
Natez que le signe%
est nécessaire même avec0%
.Si seulement l'étape
from
ou0%
est définie, le navigateur termine l'animation sur les valeurs actuelles des propriétés. De même s'il n'y a que l'étape finale qui est définie (to
ou100%
), le navigateur commence l'animation avec les valeurs actuelles des propriétés.Les propriétés sur lesquelles porte l'animation peuvent être la plupart des propriétés CSS qui acceptent des valeurs numériques ou des couleurs. Les propriétés qui n'acceptent que des valeurs discrètes (comme
float
,font-family
, etc.) peuvent cependent être animées mais la transition se fera de façon brutale entre la valeur de départ et la valeur de fin. Quelques rares propriétés ne sont pas animables, c'est à dire ignorées si elles sont citées dans la directive@keyframes
.Si une des propriétés citées dans l'animation est par ailleurs définie avec
!important
, l'animation n'est pas traitée sur cette propriété. - @keyframes demo { from { prop1:valeur; prop2:valeur; animation-timing-function: linear; } 30% { prop1:valeur; prop2:valeur; animation-timing-function: ease-out; } ... to { prop1:valeur; prop2:valeur; } }
Dans ce deuxième exemple de syntaxe,
animation-timing-function
définit la dynamique de l'animation pour chacune des étapes. Cette dynamique sera utilisée jusqu'à l'étape suivante.
Sur la dernière étape (to
ou100%
),animation-timing-function
est ignoré.Reportez vous à la propriété
animation-timing-function
pour plus de précisions sur cette notion de dynamique.
Exemples.
Deux animations ont été définies :
- Une simple rotation, appliquée sur le bloc carré.
- Un parcours autour d'un périmètre carré, appliqué à la puce bleue.
Le troisième exemple combine ces deux animations.
Enfin, voici un autre exemple utilisant des dynamiques différentes pour chacune des étapes de l'animation : la première étape (agrandissement) se fait par saccades, tandis que le rétrécissement se fait de façon linéaire.
Prise en charge par les navigateurs (compatibilité).
Les animations CSS, et donc la directive @keyframes
, sont maintenant bien reconnues par les navigateurs.
@keyframes
permettant de définir les propriétés concernées par une animation.
@keyframes
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que @keyframes
.
Les spécifications CSS éditées par le W3C sont organisées en modules. @keyframes
fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.