Règle @keyframes CSS3

.......................

...


Les propriétés CSS

Exemple : Faire  déplacer un élément div en mouvement  progressive horizontal:

Sélectionner le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
         <title></title>
         <style>
div
{
width:210px;
background:#fd0;
position:relative;
animation:monMouvement 5s infinite;
-webkit-animation:monMouvement 5s infinite; /* Safari et Chrome*/
}
@keyframes monMouvement
{
from {left:0px;}
to {left:400px;}
}
@-webkit-keyframes monMouvement /* Safari et Chrome */
{
from {left:0px;}
to {left:400px;}
}
</style>
</head>
<body>
<div><p><strong>Note:</strong> La régle @keyframes n'est pas supportée dans Internet Explorer 9 et versions antérieures..</p></div>
</body>
</html>

Plus d'exemples au bas de cette page.

Dans les exemples qui vont venir  nous gardant le même code en changeant les deux blocs @-webkit-keyframes monMouvement{…} et @keyframes monMouvement{…}


Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La règle @keyframes est pris en charge dans Internet Explorer 10, Firefox et Opera.

Safari et Chrome prennent en charge une solution de rechange, la règle @-webkit-keyframes.

Remarque : La règle @keyframes n'est pas prise en charge dans Internet Explorer 9 et versions antérieures.


Définition et utilisation

Avec la règle  @keyframes, vous pouvez créer des animations.

L'animation est créée en modifiant progressivement le style CSS d'un ensemble de styles CSS à un autre.

Au cours de l'animation, vous pouvez modifier l'ensemble des styles CSS plusieurs fois.

Vous devez indiquez quand le changement se produira en pourcentage, ou par les mots clés «from » et « to », qui sont les mêmes que 0 % et 100 %.

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

Pour une meilleure prise en charge de l’animation par le navigateur, vous devez toujours définir aussi bien le 0 % et le100 %.

Remarque : Utilisez les propriétés de l'animation pour contrôler l'apparence de l'animation et aussi pour lier l'animation aux sélecteurs.


Syntaxe

@keyframes nomAnimation { Sélecteur-keyframes {css-styles;}}

Valeur Description
nomAnimation Obligatoire. Définit un nom pour l’animation.
Sélecteur-keyframes Obligatoire. Pourcentage de la durée de l'animation.

Valeurs autorisées :

0-100 %
from (ou 0%)
to (ou 100%)

Remarque : Vous pouvez avoir plusieurs Sélecteur-keyframes dans une animation.

css-styles Required. One or more legal CSS style properties

Exemple Ajouter plusieurs sélecteurs dans une animation :

Sélectionner 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 Changer plusieurs styles CSS dans une animation :

Sélectionner 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 Plusieurs sélecteurs  keyframe avec plusieurs styles CSS :

Sélectionner 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;}
}

Si une animation a les mêmes propriétés de début et  fin, une façon de le faire est l’utilisation des virgules séparent le 0% et 100% :

Sélectionner le code
@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;
  }
}

Vous pouvez toujours demander à l'animation de s’exécuter un nombre de fois (par exemple 4 fois) et donner un délai avant exécution.

Sélectionner le code
<!doctype html>
<html lang="fr">
<head>
         <meta charset="UTF-8">
         <title></title>
         <style>
div
{
width:210px;
background:#fd0;
position:relative;
}
.box {
 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 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> La
régle @keyframes n'est pas supportée dans Internet Explorer 9
et versions antérieures.</p></div>
</body>
</html>
Action Description Valeurs possible

timing-function

timing-function

ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (exp:  cubic-bezier(0.5, 0.2, 0.3, 1.0))

duration & delay

durée et retard

Nombre en s ou ms (exemple : 5s ou 5000ms

Iteration-count

Nombre de fois

nombre

fill-mode

-mode de remplissage

forwards, backwards, both, none

animation-direction

direction de l’animation

normal, alternate

Raccourci d'animation

Un raccourci pour les propriété du tableau ci-dessus juste séparer par des espaces toutes les valeurs individuelles. L'ordre n'a pas d'importance sauf si vous utilisez à la fois la durée et les délais, ils doivent être dans cet ordre. Dans l'exemple ci-dessous 1s = durée, 2s = retard, 3 = itérations.

Sélectionner le code
animation: monMouvement 1s 2s 3 alternate backwards;
-webkit-animation: monMouvement 1s 2s 3 alternate backwards;/*Safari et Chrome */

Combinez transformer et animation

Vous pouvez aussi combiner des transformations et des animations, voici un exemple

Sélectionner le code
<!doctype html>
<html lang="fr">
<head>
         <meta charset="UTF-8">
         <title></title>
         <style>
div
{
width:210px;
background:#fd0;
position:relative;
}
.box {
 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 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> La régle @keyframes n'est pas supportée dans Internet Explorer 9 et versions antérieures.</p></div>
</body>

Pages connexes

Tutoriel CSS3 :Animations CSS3


Par carabde 10 mars 2014