Règle @keyframes CSS

Définition et utilisation

Grâce à la règle @keyframes, vous pouvez créer une animation.

Le principe de création d'animation est de faire évoluer graduellement un ensemble de styles CSS vers un autre.

Au cours du processus d'animation, vous pouvez modifier plusieurs fois ce ensemble de styles CSS.

Définissez le moment où les changements se produisent en pourcentage, ou à l'aide des mots-clés "from" et "to", équivalents à 0% et 100%.

0% est le début de l'animation, 100% est la fin de l'animation.

Astuce :Pour obtenir la meilleure prise en charge du navigateur, vous devez toujours définir les sélecteurs 0% et 100%.

Astuce :Utilisez les propriétés d'animation pour contrôler l'apparence de l'animation tout en liant l'animation au sélecteur.

Attention :!important règle est ignorée dans les claveaux (voir le dernier exemple de cette page).

Voir également :

Tutoriel CSS3 :animation CSS3

Exemple

Exemple 1

Faire déplacer le div élément vers le bas uniformément :

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Essayez-le vous-même

Exemple 2

Ajouter plusieurs sélecteurs de keyframe dans une animation :

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

Essayez-le vous-même

Exemple 3

Changer plusieurs styles CSS dans une animation :

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

Essayez-le vous-même

Exemple 4

Plusieurs sélecteurs de keyframe avec plusieurs styles CSS :

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

Essayez-le vous-même

Exemple 5

Attention :Les règles !important sont ignorées dans les claveaux :

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* Ignoré */
  to   {top: 200px;}
}

Essayez-le vous-même

Syntaxe CSS

@keyframes animationname {keyframes-selector {css-styles;}}

Valeur de l'attribut

Valeur Description
animationname Obligatoire. Définir le nom de l'animation.
keyframes-selector

Obligatoire. Pourcentage de la durée de l'animation.

Valeurs valides :

  • 0-100%
  • from (égal à 0%)
  • to (égal à 100%)
css-styles Obligatoire. Un ou plusieurs attributs CSS valides.

Support du navigateur

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-