Règle CSS @keyframes
La règle @keyframes est la base des animations par keyframes utilisées pour animer (changer progressivement d'un style à un autre) de nombreuses propriétés CSS. Cette règle permet de spécifier ce qui doit se produire à des moments précis pendant l'animation en définissant des styles pour les keyframes (ou points de passage) le long de la séquence d'animation.
La règle @keyframes est une partie intégrante de la spécification CSS Animations.
La règle @keyframes et son identifiant sont suivis de jeux de règles (c'est-à-dire des règles de style avec des sélecteurs et des blocs de déclaration, comme dans le code CSS normal) délimités par des accolades.
Les keyframes dans la séquence d'animation
À l'intérieur des accolades, les sélecteurs de keyframes définissent quand les styles doivent changer pendant la séquence d'animation. L'ensemble des styles CSS peut être mis à jour plusieurs fois tout au long de l'animation.
Sélecteur de keyframe
Le bloc de déclaration de keyframe inclut les propriétés CSS et leurs valeurs. Un sélecteur de keyframe 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 % marque la fin.
Préfixes fournisseurs
La règle @keyframes est entièrement prise en charge par tous les navigateurs modernes sans nécessiter de préfixes fournisseurs. Les préfixes hérités (comme -webkit- ou -moz-) ne sont plus requis.
Syntaxe
Syntaxe de la règle CSS @keyframes
@keyframes animationname {keyframes-selector {css-styles;}}Utilisation de @keyframes comme mot-clé
La règle @keyframes est constitué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 pour 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 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. Tout d'abord, nous définissons un identifiant pour l'animation : backgrounds. Ensuite, nous définissons des sélecteurs de keyframes (0 %, 50 % et 100 %) et définissons 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 le prochain keyframe (50 %). Au milieu de la séquence d'animation, le fond deviendra bleu clair, et au point de terminaison (100 %), il sera gris.
Exemple de la règle @keyframes :
Exemple de la règle 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 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://fr.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs" width="150" height="50" />
</div>
</body>
</html>Composants de la syntaxe
| Composant | Description |
|---|---|
identifier | Spécifie le nom de l'animation. Requis. |
keyframe-selector | Spécifie le pourcentage de la durée de l'animation. Accepte 0 % à 100 %, from (0 %) ou to (100 %). Requis. |
declaration-block | Contient les propriétés et valeurs CSS à appliquer à chaque keyframe. Requis. |
Pratique
Qu'est-ce qui est correct concernant les keyframes CSS ?