Accueil    CSS    Propriété @keyframes
 



style css @keyframes  Style CSS @keyframes

«  Partie précédente  |  Index  |  Partie suivante  »


La règle css @keyframes permet de détailler les étapes d'une animation ainsi que les propriétés qui évolueront durant ces étapes. Elle est reliée à la propriété d'animation d'un élément html par la valeur associée à application-name.

Définition de la propriété css animation-name au niveau de l'élément html :
#IdElement{ ... animation-name:NomAmination;

Correspondance du nom au niveau de la règle @keyframes pour faire le lien :
@keyframes NomAmination{from {left:0px;} to {left:180px;}}

La règle @keyframes se déclare avec les styles, et défini les étapes de l'animation soit avec des pourcentages soit avec les mots clés "from" et "to" (équivalent à 0% et 100%). On passe ainsi d'un état initial qui est 0% à un état final qui est 100% avec si l'on utilise les pourcentages différentes étapes intermédiares. A chaque étape, on redéfini les valeurs des styles css qui sont animés la transition entre les valeurs étant réalisée automatiquement.

Exemple de définition de règles @keyframes :
@keyframes NomAmination{
   from {left:0px; width:100px; color:blue;}
   to {left:180px; width:250px; color:green;}
}

@keyframes NomAmination{
   0% {left:0px; width:100px; color:blue;}
   30% {left:40px; width:160px; color:red;}
   60% {left:100px; width:210px; color:orange;}
   100% {left:180px; width:250px; color:green;}
}

Actuellement chaque navigateur se base sur sa propre version de la propriété @keyframes, ce qui fait beaucoup de duplication de code css :
    - Chrome et safari utilisent la propriété "@-webkit-keyframes"
    - Firefox utilise la propriété "@-moz-keyframes"
    - Opera utilise la propriété "@-o-keyframes"
    - Internet Explorer n'implémente pas encore la règle css @keyframes



Exemple d'utilisation de la règle css @keyframes :




Propriété Définition Valeurs CSS
animation-name Permet d'asocier un nom en référence à la règle @keyframe qui défini les étapes de l'animation nom keyframe
none
CSS 3
sélecteurs @keyframes Les étapes de l'animation peuvent être spécifiés avec les mots clés "from" et "to" ou avec des pourcentages (allant de 0% à 100%) from
to
%
CSS 3


Exemple d'utilisation de la règle css @keyframes :





<style type="text/css">
#animDiv{
   position:relative;
   display:inline-block;
   width:150px;
   height:150px;
   border:solid 10px #909E87;
   border-radius:85px;
   background-color:#BED1B2;
   line-height:150px;
   font-size:24px;
   text-align:center;

   animation-name:animRoule; -webkit-animation-name:animRoule;
   -moz-animation-name:animRoule; -o-animation-name:animRoule;
   animation-duration:4s; -webkit-animation-duration:4s;
   -moz-animation-duration:4s; -o-animation-duration:4s;
   animation-iteration-count :infinite; -webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
   animation-direction:alternate; -webkit-animation-direction:alternate;
   -moz-animation-direction:alternate; -o-animation-direction:alternate;
   animation-timing-function:linear; -webkit-animation-timing-function:linear;
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear;
}

@keyframes animRoule{
   from {transform:rotate(0deg); left:0px;} to {transform:rotate(360deg); left:350px;}
}
@-webkit-keyframes animRoule{
   from {-webkit-transform:rotate(0deg); left:0px;} to {-webkit-transform:rotate(360deg); left:350px;}
}
@-moz-keyframes animRoule{
   from {-moz-transform:rotate(0deg); left:0px;} to {-moz-transform:rotate(360deg); left:350px;}
}
@-o-keyframes animRoule{
   from {-o-transform:rotate(0deg); left:0px;} to {-o-transform:rotate(360deg); left:350px;}
}
</style>

<div id="animDiv">
   Roule !
</div>




Roule !