Accueil    CSS    Propriété animation-delay
 



style css animation-delay  Style CSS animation-delay

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


La propriété animation-delay permet de spécifier une durée d'attente avant de lancer l'animation. Ce décompte commence une fois la page chargée. Pour contrôler la lecture ou la mise en attente d'une animation, il est également possible d'employer la propriété animation-play-state.

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



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




Propriété Définition Valeurs CSS
animation-delay Détermine le délai à respecter avant de démarrer l'animation (en secondes ou millisecondes) durée :
##s
##ms
CSS 3


Exemple d'utilisation du style css animation-delay :






<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;
   animation-delay:10s; -webkit-animation-delay:10s;
   -moz-animation-delay:10s; -o-animation-delay:10s;
}

@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 !