La règle CSS @keyframes
La règle @keyframes définit le code d'animation CSS en modifiant progressivement les styles d'un élément d'un état à un autre.
La règle at-rule @keyframes est la base des animations par images clés qui permettent d'animer (modifier progressivement d'un style à un autre) de nombreuses propriétés CSS. Cette règle permet de définir ce qui doit se produire à des moments précis de l'animation en définissant des styles pour les images clés (ou points de passage) tout au long de la séquence d'animation.
La règle @keyframes fait partie intégrante de la spécification CSS Animations.
La règle @keyframes et son identifiant sont suivis d'ensembles de règles (c'est-à-dire des règles de style avec des sélecteurs et des blocs de déclarations, comme dans le code CSS normal) délimités par des accolades.
Les images clés dans la séquence d'animation
À l'intérieur des accolades, les sélecteurs d'images clés définissent quand les styles doivent changer au cours de la séquence d'animation. L'ensemble des styles CSS peut être mis à jour plusieurs fois tout au long de l'animation.
Le sélecteur d'image clé
Le bloc de déclaration d'une image clé contient des propriétés CSS et leurs valeurs. Un sélecteur d'image clé peut utiliser un pourcentage (%) ou les mots-clés from (équivalent à 0%) et to (équivalent à 100%). 0% marque le début de l'animation, et 100% en marque la fin.
Vous n'êtes pas limité à deux images clés. L'ajout de sélecteurs intermédiaires tels que 25% ou 75% vous permet de contrôler l'animation à autant de points que nécessaire :
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}Vous pouvez également regrouper les sélecteurs qui partagent les mêmes styles en les séparant par des virgules : 0%, 100% { opacity: 1; }.
Comment le navigateur comble les lacunes
Vous ne déclarez des styles qu'aux points de passage des images clés — le navigateur interpole chaque image intermédiaire. Si vous animez background-color du vert à 0% vers le bleu à 50%, les couleurs se fondent harmonieusement sur cet intervalle ; vous n'avez jamais à spécifier les valeurs intermédiaires vous-même.
Quelques règles régissent cette interpolation :
- Seules les propriétés animables s'interpolent. Les valeurs numériques et les couleurs (telles que
width,opacity,transformetcolor) s'animent en douceur. Les propriétés commedisplaypassent instantanément d'une image clé à l'autre sans transition. - La cadence est contrôlée séparément. La forme de la courbe d'interpolation (linear, ease, ease-in-out, etc.) provient de animation-timing-function, et non de
@keyframes. - Les valeurs
from/tomanquantes sont déduites. Si vous omettez l'image clé0%ou100%, le navigateur utilise la valeur calculée existante de l'élément pour cette propriété comme point d'extrémité manquant.
Préfixes vendeurs
La règle @keyframes est pleinement prise en charge par tous les navigateurs modernes sans avoir besoin de préfixes vendeurs. Les anciens préfixes (comme -webkit- ou -moz-) ne sont plus nécessaires.
Syntaxe
Syntaxe de la règle at-rule CSS @keyframes
@keyframes animationname {keyframes-selector {css-styles;}}Utiliser @keyframes comme mot-clé
La règle @keyframes est composée du mot-clé @keyframes suivi d'un identifiant (choisi par le développeur) qui définit l'animation. Pour lier l'animation à un élément, cet identifiant est utilisé comme valeur de la propriété animation-name.
Voici à quoi cela ressemble :
Comment définir une animation et l'appliquer à un élément
/* define the animation */
@keyframes your-animation-name {
/* style rules */
}
/* apply it to an element */
.element {
animation-name: your-animation-name;
/* OR using the animation shorthand property */
animation: your-animation-name 1s …;
}Exemple de la règle @keyframes avec la propriété background-color :
Exemple de la règle at-rule CSS @keyframes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 50px;
animation: backgrounds 4s infinite;
}
@keyframes backgrounds {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #cccccc;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="element">The background of this text is animated.</div>
</body>
</html>Dans cet exemple, nous animons la propriété background-color. D'abord, nous définissons un identifiant pour l'animation : backgrounds. Ensuite, nous définissons des sélecteurs d'images clés (0%, 50% et 100%) et des valeurs pour la propriété : vert, bleu et gris. Cela signifie qu'au point de départ (0%), la couleur de fond sera vert clair jusqu'à ce qu'elle atteigne l'image clé suivante (50%). Au milieu de la séquence d'animation, le fond passera au bleu clair, et au point final (100%), il sera gris.
Exemple de la règle @keyframes :
Exemple de la règle at-rule CSS @keyframes avec la valeur infinite
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 10px;
height: 100px;
background: red;
border-radius: 50%;
position: relative;
animation: element 4s infinite;
}
@keyframes element {
0% {
top: 0px;
background: #1c87c9;
width: 100px;
}
100% {
top: 200px;
background: #8ebf42;
width: 150px;
}
}
</style>
</head>
<body>
<h2>@keyframes rule example</h2>
<div></div>
</body>
</html>Exemple d'utilisation de la règle @keyframes pour créer une image qui tombe :
Exemple de la règle at-rule CSS @keyframes avec la propriété transform
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
height: 90%;
}
.container {
margin: 30px auto;
min-width: 320px;
max-width: 600px;
height: 90%;
overflow: hidden;
}
img {
transform-origin: left center;
animation: fall 5s infinite;
}
@keyframes fall {
from {
transform: rotate(0) translateX(0);
opacity: 1;
}
to {
transform: rotate(90deg) translateX(200px);
opacity: 0.1;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="container">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50" />
</div>
</body>
</html>Composants de la syntaxe
| Composant | Description |
|---|---|
identifier | Spécifie le nom de l'animation. Obligatoire. |
keyframe-selector | Spécifie le pourcentage de la durée d'animation. Accepte 0% à 100%, from (0%) ou to (100%). Obligatoire. |
declaration-block | Contient les propriétés CSS et les valeurs à appliquer à chaque image clé. Obligatoire. |
Pièges courants
@keyframesseul ne fait rien. La règle ne fait que définir l'animation. Rien ne se déplace tant que vous ne référencez pas le nom depuis un élément avec la propriété animation-name (ou la propriété raccourcieanimation) et que vous ne lui donnez pas une animation-duration non nulle.- Les noms sont sensibles à la casse et ne doivent pas être des mots-clés CSS globaux. Évitez les mots réservés tels que
none,initial,inheritetunsetcomme noms d'animation. - Les règles d'images clés dupliquées sont en cascade. Si deux blocs
@keyframespartagent le même nom, le dernier défini l'emporte entièrement — ils ne sont pas fusionnés. !importantà l'intérieur d'une image clé est ignoré. La spécification Animations supprime spécifiquement les déclarations!importantà l'intérieur des images clés.
Sujets connexes
- animation — la propriété raccourcie qui lie une définition d'image clé à un élément.
- animation-name — sélectionne quelle règle
@keyframess'exécute. - animation-duration — la durée d'un cycle.
- animation-timing-function — la courbe d'accélération entre les images clés.
- animation-iteration-count — le nombre de répétitions de l'animation.