Accueil    CSS    Propriété animation-duration
 



style css animation-duration  Style CSS animation-duration

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


La propriété animation-duration détermine la durée que mettra l'animation à s'exécuter complètement. Elle conditionne donc directement la vitesse de déplacement des éléments ou la vitesse de changement des autres états (couleur, opacité ...).

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-duration" et "@-webkit-keyframes"
    - Firefox utilise les propriétés "-moz-animation-duration" et "@-moz-keyframes"
    - Opera utilise les propriétés "-o-animation-duration" et "@-o-keyframes"
    - Internet Explorer n'implémente pas encore les animations css



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




Propriété Définition Valeurs CSS
animation-duration Détermine la durée pour réaliser l'animation (en secondes ou millisecondes) durée :
##s
##ms
CSS 3


Exemple d'utilisation du style css animation-duration :






<style type="text/css">
.divRonde{
   display:inline-block;
   margin:20px;
   width:150px;
   height:150px;
   border:solid 1px black;
   background-color:lightsteelblue;
   border-radius:75px;
   line-height:150px;
   font-size:24px;
   text-align:center;
}

#animDivRapide{
   animation-name:rotation; -webkit-animation-name:rotation;
   -moz-animation-name:rotation; -o-animation-name:rotation;
   animation-duration:2s; -webkit-animation-duration:2s;
   -moz-animation-duration:2s; -o-animation-duration:2s;
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
}

#animDivLente{
   animation-name:rotation; -webkit-animation-name:rotation;
   -moz-animation-name:rotation; -o-animation-name:rotation;
   animation-duration:6s; -webkit-animation-duration:6s;
   -moz-animation-duration:6s; -o-animation-duration:6s;
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
}

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

<div id="animDivRapide" class="divRonde">
   RAPIDE !
</div>

<div id="animDivLente" class="divRonde">
   LENT !
</div>




Animation avec un effet de rotation (style css transform) et une durée de 2 et 6 secondes :

RAPIDE !
LENT !