Règle CSS @keyframes

❮ Précédent Suivant ❯

La règle @keyframes est la base de keyframe animations utilisée pour animer (changer graduellement d'un style à un autre) plusieurs propriétés CSS. Cette règle permet de spécifier ce qui doit occurer aux moments spécifiques pendant l'animation en définissant les styles pour keyframes (ou points de repère) le long de la séquence de l'animation.

La règle @keyframes et son identificateur sont suivis par un ensemble des règles (i.e. règles de styles avec sélécteurs et blocs de déclaration, comme dans le code normal CSS ) délimités par accolades.

Ce qui est mis entre accolades, ce sont les sélécteurs keyframe, qui définissent des keyframes dans la séquence de l'animation lorsque les styles doivent être changés. Pendant la séquence de l'animation, l'ensemble des styles CSS peut être changé plusieurs fois.

Le bloc de la déclaration keyframe comprend les propriétés CSS et leurs valeurs. Le sélécteur keyframe peut commencer avec un pourcentage (%) ou avec les mots-clés “from” (même que 0%) et “to” (même que 100%). 0% est un point de départ de l'animation, 100% est le point de la fin.

La règle @keyframes est totalement suppotée par les navigateurs majeurs. Cependant, pour quelques navigateur, on utilise des préfixes:

-webkit- Google Chrome 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-o- Opera 12.0

Syntaxe

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

La règle @keyframes se compose d'un mot-clé “@keyframes” suivi par un identificateur (choisi par le developeur), qui définit l'animation. Afin de lier l'animation à un certain élément, cet identificateur est référé comme une valeur pour la propriété animation-name.

Voici à quoi cela ressemble:

/* définir l'animation */
@keyframes your-animation-name {
/* règles de style */
}
/* l'appliquer à un élément */
.element {
animation-name: your-animation-name;
/* OU utiliser la propriété raccourcie animation */
animation: your-animation-name 1s … ;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .element {
      padding: 50px;
      animation: backgrounds 4s infinite;
      }
      @keyframes backgrounds {
      0% { background-color: #8ebf42}
      50% { background-color: #1c87c9; }
      100% { background-color: #ccc; }
      }
    </style>
  </head>
  <body>
    <h2>Exemple de @keyframes</h2>
    <div class="element">L'arrière-plan de ce texte est animé.</div>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple, nous animons la propriété background color. Au début, nous avons définit un identificateur pour l'animation - bouncing. Ensuite, nous avons spécifiés les sélécteurs keyframe - 0%, 50%, et 100% et les valeurs pour la propriété - green, blue et grey. Cela signifie que la couleur de l'arrière-plan au point de départ (0%) sera vert jusqu'au moment où elle arrive à keyframe (50%), au milieu de la séquence de l'animation, l'arrière-plan changera à bleu (50%-100%), et au point de la fin (100%) il sera gris.

Un autre exemple avec @keyframes:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      width: 10px;
      height: 100px;
      background: red;
      border-radius: 50%;
      position: relative;
      -webkit-animation: element 4s infinite; 
      animation: element 4s infinite;
      }
      @-webkit-keyframes element {
      0%   {top: 0px; background: #1c87c9; width: 100px;}
      100% {top: 200px; background: #8ebf42; width: 150px;}
      }
      @keyframes element {
      0%   {top: 0px; background: #1c87c9; width: 100px;}
      100% {top: 200px; background: #8ebf42; width: 150px;}
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la règle @keyframes</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Un exemple dans lequel l'image tombe en utilisant @keyframes:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      html, body {
      height: 90%;
      } 
      .container {
      margin: 30px auto;
      min-width: 320px;
      max-width: 600px;
      height: 90%;
      overflow: hidden;
      }
      img {
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;
      -webkit-animation: fall 5s infinite;
      animation: fall 5s infinite;
      }
      @-webkit-keyframes fall{
      from {
      -webkit-transform: rotate(0) translateX(0);
      transform: rotate(0) translateX(0);
      opacity: 1;
      }
      to {
      -webkit-transform: rotate(90deg) translateX(200px);
      transform: rotate(90deg) translateX(200px);
      opacity: 0.1;
      }
      }
      @keyframes fall{
      from {
      -webkit-transform: rotate(0) translateX(0);
      transform: rotate(0) translateX(0);
      opacity: 1;
      }
      to {
      -webkit-transform: rotate(90deg) translateX(200px);
      transform: rotate(90deg) translateX(200px);
      opacity: 0.1;
      }
      }
    </style>
  </head>
  <body>
    <h2>Exemple @keyframes </h2>
    <div class="container">
      <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50"/>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
animationname	Spécifie le nom de l'animation. Cette valeur est requise.
keyframes-selector	Spécifie le pourcentage de la durée de l'animation. Les valeurs sont: 0-100% from (même que 0%) to (même que 100%) Cette valeur est requise.
css-styles	Propriétés des styles CSS. Cette valeur est requise.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.