OUJOOD.COM
Introduction et Définition de @keyframes
La règle **@keyframes** est le cœur des animations en CSS3. Elle permet de définir l'ensemble des styles CSS que l'élément doit suivre à des moments précis (les étapes clés) durant l'animation.
Définition et UtilisationAvec la règle @keyframes, vous définissez les étapes clés d'une animation. L'animation est créée en modifiant progressivement le style CSS d'un état à un autre. Vous pouvez définir ces étapes :
- En **pourcentage** (de $0\%$ à $100\%$).
- Par les mots-clés « $\mathbf{from}$ » (équivalent à $0\%$ - le début de l'animation) et « $\mathbf{to}$ » (équivalent à $100\%$ - la fin de l'animation).
Syntaxe de la règle @keyframes
La syntaxe est simple : elle nécessite un nom d'animation, suivi d'un ou plusieurs sélecteurs d'étapes (pourcentages ou `from`/`to`) contenant les styles CSS à appliquer.
@keyframes **nomAnimation** { $\mathbf{sélecteur-keyframes}$ {css-styles;} $\mathbf{sélecteur-keyframes}$ {css-styles;} }
| Valeur | Description |
|---|---|
| nomAnimation | Obligatoire. Définit le nom unique de l'animation, utilisé par la propriété animation-name. |
| Sélecteur-keyframes | Obligatoire. Indique le moment de l'animation ($0\%$ à $100\%$, from ou to). **Remarque** : On peut regrouper plusieurs étapes séparées par une virgule. |
| css-styles | Obligatoire. Une ou plusieurs propriétés de style CSS à appliquer à cette étape. |
Exemple 1 : Animation de base (from/to)
Faire déplacer un élément div horizontalement de $0\text{px}$ à $400\text{px}$.
Exemple 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Keyframes</title>
<style>
div
{
width:210px;
background:#fd0;
position:relative; /* Nécessaire pour l'animation de 'left' */
animation:monMouvement 5s infinite;
-webkit-animation:monMouvement 5s infinite; /* Préfixe Safari et Chrome (ancien) */
}
/* Définition de l'animation */
@keyframes monMouvement
{
from {left:0px;} /* État initial */
to {left:400px;} /* État final */
}
/* Préfixe pour Safari et Chrome (ancien) */
@-webkit-keyframes monMouvement
{
from {left:0px;}
to {left:400px;}
}
</style>
</head>
<body>
<div><p><strong>Note:</strong> L'animation est définie sur 5 secondes et se répète à l'infini.</p></div>
</body>
</html>
Plus d'exemples dans ce qui suit ci-dessous. Dans les exemples qui vont venir, nous gardons le même contexte HTML et les propriétés d'animation du `div`, en changeant uniquement le contenu des blocs `@keyframes` et `@-webkit-keyframes`.
Support des navigateurs et Préfixes
La règle @keyframes est bien prise en charge par les versions modernes d'Internet Explorer 10+, Firefox, Opera, Chrome et Safari.
Les préfixes vendeurs comme -webkit- (pour Chrome/Safari) ne sont plus nécessaires pour la plupart des utilisateurs, mais sont inclus dans ces exemples pour assurer une compatibilité maximale avec les anciennes versions.
**Remarque :** La règle @keyframes n'est pas prise en charge dans Internet Explorer 9 et versions antérieures.
Exemple 2 : Multiples étapes d'animation (0% à 100%)
Ajouter des étapes intermédiaires en utilisant les pourcentages pour un mouvement non linéaire.
Exemple 📋 Copier le code
@keyframes monMouvement
{
0% {left:0px;}
25% {left:50px;}
75% {left:150px}
100% {left:200px;}
}
@-webkit-keyframes monMouvement /* Safari et Chrome */
{
0% {left:0px;}
25% {left:50px;}
75% {left:150px}
100% {left:200px;}
}
Exemple 3 : Animation de plusieurs propriétés CSS
Changer la couleur de fond (`background`) et la taille (`width`) en plus de la position.
Exemple 📋 Copier le code
@keyframes monMouvement
{
0% { background:red; width:0px;}
100% { background:yellow; width:300px;}
}
@-webkit-keyframes monMouvement /* Safari et Chrome */
{
0% { background:red; width:0px;}
100% { background:yellow; width:300px;}
}
Exemple 4 : Mouvement complexe avec plusieurs styles
Combinaison de plusieurs étapes (`0%`, $25\%$, $50\%$, $75\%$, $100\%$) et de multiples styles CSS (position $x/y$, couleur de fond, couleur du texte).
Exemple 📋 Copier le code
@keyframes monMouvement
{
0% {top:0px; left:0px; background:red;color:#fff;}
25% {top:0px; left:100px; background:blue;color:#fff;}
50% {top:100px; left:100px; background:yellow;color:#000;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;color:#fff;}
}
@-webkit-keyframes monMouvement /* Safari et Chrome */
{
0% {top:0px; left:0px; background:red;color:#fff;}
25% {top:0px; left:100px; background:blue;color:#fff;}
50% {top:100px; left:100px; background:yellow;color:#000;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;color:#fff;}
}
Exemple 5 : Groupement des sélecteurs (0%, 100%)
Si plusieurs étapes de l'animation partagent les mêmes propriétés CSS (par exemple, le début et la fin), vous pouvez les regrouper en les séparant par une virgule.
Exemple 📋 Copier le code
@keyframes monMouvement
{
0%, 100% { /* Début et Fin partagent ces styles */
font-size : 12px ;
}
50% {
font-size : 20px ; width:400px;
}
}
@-webkit-keyframes monMouvement /* Safari et Chrome */
{
0%, 100% {
font-size : 12px ;
}
50% {
font-size : 20px ;width:400px;
}
}
Contrôler l'animation : Les propriétés CSS
Pour appliquer et contrôler l'animation (définie par `@keyframes`) sur un élément, vous devez utiliser les propriétés d'animation CSS. Ces propriétés lient la règle `@keyframes` à l'élément et définissent sa durée, son nombre de répétitions, son délai, etc.
| Propriété | Description | Valeurs possible |
|---|---|---|
animation-name |
Nom de la règle @keyframes à utiliser. |
Nom de l'animation (ex: monMouvement) |
animation-timing-function |
Courbe de vitesse de l'animation (accélération/décélération). | ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(...) |
animation-duration |
Durée totale de l'animation. | Nombre en s ou ms (ex: 5s ou 5000ms) |
animation-delay |
Délai avant le début de l'animation. | Nombre en s ou ms (ex: 2s) |
animation-iteration-count |
Nombre de fois où l'animation doit être jouée. | Nombre (ex: 4) ou infinite |
animation-fill-mode |
Détermine les styles appliqués à l'élément avant/après l'exécution. | forwards, backwards, both, none |
animation-direction |
Détermine si l'animation doit jouer en sens inverse après chaque cycle. | normal, alternate, reverse |
Exemple 6 : Utilisation des propriétés d'animation
Cet exemple illustre comment appliquer les propriétés de contrôle pour jouer l'animation 4 fois (`animation-iteration-count`), avec un délai de 2 secondes, en alternant les directions.
Exemple 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Animation Contrôlée</title>
<style>
div
{
width:210px;
background:#fd0;
position:relative;
}
.box {
/* Propriétés standard */
animation-name: monMouvement;
animation-duration: 10s;
animation-iteration-count: 4;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
/* Safari et Chrome */
.box {
-webkit-animation-name: monMouvement;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 2s;
}
/* Keyframes (Keyframes de l'Exemple 5 utilisé ici) */
@keyframes monMouvement
{
0%, 100% { font-size : 12px ; }
50% { font-size : 20px ; width:400px; }
}
@-webkit-keyframes monMouvement /* Safari et Chrome */
{
0%, 100% { font-size : 12px ; }
50% { font-size : 20px ;width:400px; }
}
</style>
</head>
<body>
<div class="box"><p><strong>Note:</strong> L'animation démarre avec 2s de délai, dure 10s et se joue 4 fois en alternance.</p></div>
</body>
</html>
Raccourci `animation` (Propriété Shorthand)
La propriété **animation** est un raccourci (*shorthand*) pour définir toutes les propriétés d'animation individuelles dans une seule déclaration. L'ordre n'est pas strict, sauf pour la durée et le délai, qui doivent être dans cet ordre : `[duration] [delay]`.
Exemple 📋 Copier le code
/* Format : name duration timing-function delay iteration-count direction fill-mode */ animation: monMouvement 1s ease-in-out 2s 3 alternate backwards; -webkit-animation: monMouvement 1s ease-in-out 2s 3 alternate backwards;/*Safari et Chrome */
Exemple 7 : Combinaison de `transform` et `animation`
Les transformations CSS (`transform: rotate`, `scale`, `translate`, etc.) sont souvent utilisées dans les `@keyframes` car elles sont optimisées par le navigateur (utilisation du GPU). Voici un exemple de rotation à $360$ degrés.
Exemple 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Keyframes et Transform</title>
<style>
div
{
width:210px;
height: 210px; /* Ajouté pour une meilleure visualisation de la rotation */
background:#fd0;
}
.box {
/* Utilisation du raccourci animation pour la clarté */
animation: monMouvement 5s infinite linear;
-webkit-animation: monMouvement 5s infinite linear;
}
@keyframes monMouvement
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes monMouvement /* Safari et Chrome */
{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"><p><strong>Note:</strong> L'utilisation de transform garantit une animation fluide.</p></div>
</body>
</html>
Pages connexes
Tutoriel CSS3 :Animations CSS3 (Propriétés complètes)
Par carabde 10 mars 2014