Accueil    CSS    Propriété animation-name
 



style css animation-name  Style CSS animation-name

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


La propriété css animation-name permet de faire le lien entre la définition de l'animation au niveau d'un élément html et la règle css @keyframes qui détaille les étapes de l'animation à proprement parlé.

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;}}


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



Propriétés pour le style animation-name :




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


Exemple d'utilisation du style css animation-name :





<style type="text/css">
#AnimAllonge
{
   position:relative;
   left:20px;
   top:20px;
   padding:0px 10px;
   width:150px;
   height:50px;
   background-color:steelblue;
   border:solid 2px silver;
   border-radius:25px;
   
   animation-name: AnimationAllonge; -webkit-animation-name: AnimationAllonge;
   -moz-animation-name: AnimationAllonge; -o-animation-name: AnimationAllonge;
   animation-duration: 3s; -webkit-animation-duration: 3s;
   -moz-animation-duration: 3s; -o-animation-duration: 3s;
   animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
   -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
   animation-timing-function:linear; -webkit-animation-timing-function:linear;
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear;
   animation-direction:alternate; -webkit-animation-direction:alternate;
   -moz-animation-direction:alternate; -o-animation-direction:alternate;
}

@keyframes AnimationAllonge {
   0% {width: 150px; background-color:steelblue;}
   100% {width: 500px; background-color:lightsteelblue;} }
@-webkit-keyframes AnimationAllonge {
   0% {width: 150px; background-color:steelblue;}
   100% {width: 500px; background-color:lightsteelblue;} }
@-moz-keyframes AnimationAllonge {
   0% {width: 150px; background-color:steelblue;}
   100% {width: 500px; background-color:lightsteelblue;} }
@-o-keyframes AnimationAllonge {
   0% {width: 150px; background-color:steelblue;}
   100% {width: 500px; background-color:lightsteelblue;} }

</style>

<div id="AnimAllonge">
   <label style="float:left; font-size:24px; line-height:50px;">«</label>
   <label style="float:right; font-size:24px; line-height:50px;">»</label>
</div>