Accueil    CSS    Propriété animation-timing-function
 



style css animation-timing-function  Style CSS animation-timing-function

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


La propriété css animation-timing-function permet de paramétrer la vitesse d'exécution de l'animation sur les différents moments clés de celle -ci :
    - Début de l'animation
    - Milieu de la'annimation
    - Fin de l'animation

Cette vitesse d'exécution se base sur le suivi d'une courbe de Bézier. Les courbes de Bézier sont basées sur 4 points spécifiques qui définissent celles-ci de façon unique :
courbe de Bézier

Les valeurs proposées pour cette propriété sont donc en réalité toutes des courbes de Bézier :
    - ease correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0)
    - linear correspond à cubic-bezier(0.0, 0.0, 1.0, 1.0)
    - ease-in correspond à cubic-bezier(0.42, 0, 1.0, 1.0)
    - ease-out correspond à cubic-bezier(0, 0, 0.58, 1.0)
    - ease-in-out correspond à cubic-bezier(0.42, 0, 0.58, 1.0)


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



Propriétés pour le style animation-timing-function :




Propriété Définition Valeurs CSS
animation-timing-function Détermine la vitesse d'exécution de l'animation sur ses différentes parties (début milieu fin) cubic-bezier(val,val,val,val)
ease
ease-in
ease-out
ease-in-out
linear
CSS 3


Exemple d'utilisation du style css animation-timing-function :




Exemple d'animations avec des variations de vitesse différentes :

<style type="text/css">
.DivRonde{
   width:30px;
   height:30px;
   border:solid 2px silver;
   border-radius:17px;
   background-color:steelblue;
}
.DivAnimRotationParent{
   margin:0px 60px;
   position:relative;
   display:inline-block;
   width:30px;
   height:100px;
   animation-name:AnimRotation; -webkit-animation-name:AnimRotation;
   -moz-animation-name:AnimRotation; -o-animation-name:AnimRotation;
   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;
}
#DivAnimParent1{
   animation-timing-function:linear; -webkit-animation-timing-function:linear;
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear;
}
</style>

<label style="margin-left:50px;">Linear :</label>
<div id="DivAnimParent1" class="DivAnimRotationParent">
   <div class="DivRonde">
   </div>
</div>


Exemple d'animations avec des variations de vitesse différentes :