Règle @keyframes CSS3

...

Les propriétés CSS

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

<!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 dans ce qui suit ci-dessous.
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
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

Sommaire

Par carabde 10 mars 2014

Règle @keyframes CSS3

Les propriétés CSS par ordre alphabétique

...

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

Exemple Ajouter plusieurs sélecteurs dans une animation :

Exemple Changer plusieurs styles CSS dans une animation :

Exemple Plusieurs sélecteurs keyframe avec plusieurs styles CSS :

Raccourci d'animation

Combinez transformer et animation

La méthode secrète likes sans fin sur Facebook