Accueil    CSS    Propriété Animation
 



style css animation  Style CSS animation

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


La propriété css animation permet de gérer le paramétrage d'une animation. Elle est directement corrélée à la règle css @keyframes qui définie les étapes de l'animation. La propriété transform est également utile pour effectuer des animations (support de la rotation).

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

Animer un élément html avec le css se fait en associant à cet élément des infornations sur l'animation et en reliant la propriété "animation-name" au nom de la règle @keyframes à employer. D'autre part il faut impérativement spécifier une durée d'animation sans quoi celle-ci est valorisée par défaut à 0 et l'animation n'est pas lancée.



<style type="text/css">
#idElement{
   position:relative; width:40px; height:40px;
   border:solid 1px black; background-color:silver;
   animation-name:monAmination; -webkit-animation-name:monAmination;
   -moz-animation-name:monAmination; -o-animation-name:monAmination;
   animation-duration:4s; -webkit-animation-duration:4s;
   -moz-animation-duration:4s; -o-animation-duration:4s;
   animation-iteration-count:10; -webkit-animation-iteration-count:10;
   -moz-animation-iteration-count:10; -o-animation-iteration-count:10;
   }
@keyframes monAmination{from {left:0px;} to {left:180px;}}
@-webkit-keyframes monAmination{from {left:0px;} to {left:180px;}}
@-moz-keyframes monAmination{from {left:0px;} to {left:180px;}}
@-o-keyframes monAmination{from {left:0px;} to {left:180px;}}
</style>
<div id="idElement">
</div>

Résultat :



Les propriétés CSS s'appliquant à l'animation d'un élément sont :
- animation-delay
- animation-direction
- animation-duration
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function



Propriétés pour le style animation :




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
animation-direction Indique dans quel sens est joué l'animation lorsque celle-ci se répète (soit à l'identique soit en alternant de sens à chaque fin de cycle) alternate
normal
CSS 3
animation-duration Détermine la durée pour compléter l'animation (en secondes ou millisecondes) durée :
##s
##ms
CSS 3
animation-iteration-count Spécifie le nombre de fois que l'animation sera jouée avant de s'arrêter infinite
valeur
CSS 3
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
animation-play-state Permet de mettre en pause ou de reprendre une animation paused
running
CSS 3
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 :






<style type="text/css">
/* Style pour l'animation de la div d'arrière-plan */
#animColorDiv{
   animation-name: color-animation; -webkit-animation-name: color-animation;
   -moz-animation-name: color-animation; -o-animation-name: color-animation;
   animation-duration:10s; -webkit-animation-duration:10s;
   -moz-animation-duration:10s; -o-animation-duration:10s;
   animation-timing-function:linear; -webkit-animation-timing-function:linear;
   -moz-animation-timing-function:linear; -o-animation-timing-function:linear;
   animation-direction:alternate; -webkit--direction:alternate;
   -moz-animation-direction:alternate; -o--direction:alternate;
   animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
}
@keyframes color-animation{
   0% {background-color:#FFFFFF;}
   100% {background-color:#8F8F8F;}
}
@-webkit-keyframes color-animation{
   0% {background-color:#FFFFFF;}
   100% {background-color:#8F8F8F;}
}
@-moz-keyframes color-animation{
   0% {background-color:#FFFFFF;}
   100% {background-color:#8F8F8F;}
}
@-o-keyframes color-animation{
   0% {background-color:#FFFFFF;}
   100% {background-color:#8F8F8F;}
}


/* Style pour l'animation de la div se déplaçant */
#animDiv{
   position:relative;
   top:20px; left:20px;
   width:50px; height:50px;
   background-color:steelblue;
   border:solid 1px grey; border-radius:25px;
   animation-name: ex-animation; -webkit-animation-name: ex-animation;
   -moz-animation-name: ex-animation; -o-animation-name: ex-animation;
   animation-duration: 10s; -webkit-animation-duration: 10s;
   -moz-animation-duration: 10s; -o-animation-duration: 10s;
   animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
   -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
}

@keyframes ex-animation {
   0% {left: 20px; top:20px; background-color:red;}
   25% {left: 380px; top:20px; background-color:orange;}
   50% {left: 380px; top:150px; background-color:yellow;}
   75% {left: 20px; top:150px; background-color:green;}
   100% {left: 20px; top:20px; background-color:red;}
}
@-webkit-keyframes ex-animation {
   0% {left: 20px; top:20px; background-color:red;}
   25% {left: 380px; top:20px; background-color:orange;}
   50% {left: 380px; top:150px; background-color:yellow;}
   75% {left: 20px; top:150px; background-color:green;}
   100% {left: 20px; top:20px; background-color:red;}
}
@-moz-keyframes ex-animation {
   0% {left: 20px; top:20px; background-color:red;}
   25% {left: 380px; top:20px; background-color:orange;}
   50% {left: 380px; top:150px; background-color:yellow;}
   75% {left: 20px; top:150px; background-color:green;}
   100% {left: 20px; top:20px; background-color:red;}
}
@-o-keyframes ex-animation {
   0% {left: 20px; top:20px; background-color:red;}
   25% {left: 380px; top:20px; background-color:orange;}
   50% {left: 380px; top:150px; background-color:yellow;}
   75% {left: 20px; top:150px; background-color:green;}
   100% {left: 20px; top:20px; background-color:red;}
}

</style>


<div id="animColorDiv" style="width:450px; height:220px; border:solid 1px black;">
   <div id="animDiv">
   </div>
</div>