Depuis CSS3, vous avez la possibilité de faire des animations en CSS3. Cependant, actuellement (05-2013) beaucoup navigateurs ne reconnaissent pas les propriétés CSS3 sans les avoir au préalable préfixées. Par exemple, rien que pour définir le bloc d'animation, il faut faire quatre déclarations : @-webkit-keyframes nomanimation { ... } /* -webkit- Chrome et Safari */
@-moz-keyframes nomanimation { ... } /* -moz -Firefox */
@-o-keyframes nomanimation{ ... } /* -o- Opera */
@keyframes nomanimation{ ... } /* Navigateur aux normes w3c */ Il en est de même pour toutes les propriétés CSS liées aux animations CSS.
Mais bon, une fois que l'on sait cela, le principe est assez simple.
Maintenant que nous avons décrit en CSS3 le comportement de notre animation grâce à la règle CSS3 @keyframes, il nous reste quelques paramétrages à faire.
animation-name, propriété d'animation de nommage
Il nous faut définir l'élément sur lequel nous allons l'appliquer l'animation Css3. La propriété Css3 animation-name va vous permettre spécifier le nom l'animation à utiliser. Vous lui assignerez la valeur de l'identifiant de l'animation Css3, dans notre cas nomanimation. @keyframes nomanimation{ ... }
div.bloccible{ animation-name : nomanimation; }
animation-duration, propriété d'animation de durée
Nous devons aussi préciser la durée en Css3 de l'animation avec la propriété CSS3 animation-duration.
Cette durée peut être exprimée en :
- secondes, le nombre sera suivi par "s"
- millisecondes : le nombre sera suivi par "ms". @keyframes nomanimation { ... }
div.bloccible{ animation-name : nomanimation; animation-duration : 20s; }
animation-iteration-count, propriété d'animation de répétition
Nous pouvons aussi préciser le nombre de fois que l'animation Css3 sera jouée. La propriété css3 animation-iteration-count:infinite va vous permettre de jouer en boucle l'animation CSS3. La valeur par défaut est 1.@keyframes nomanimation { ... }
div.bloccible{ animation-name : nomanimation; animation-iteration-count : infinite; }
animation-fill-mode
Il est possible que vous ayez besoin de la propriété css3 animation-fill-mode qui permet de spécifier la manière dont doit être interprété les propriétés css contenues dans la première ou dernière image clé.
Dans le code suivant, la couleur initiale est yellow, quand l'animation Css va commencer la couleur devient red puis évolue vers le green et une fois l'animation Css finie la couleur redevient yellow, @keyframes nomanimation { 0%{background-color:red;}
100%{background-color:green;}
}
div.bloccible{ animation-name : nomanimation; background-color:yellow; } Dans le code suivant, la couleur initiale est la couleur de la première image clé, quand l'animation Css3 va commencer la couleur évolue vers le green et une fois l'animation Css3 finie la couleur reste green, @keyframes nomanimation { 0%{background-color:red;}
100%{background-color:green;}
}
div.bloccible{ animation-name : nomanimation; background-color:yellow; animation-fill-mode:both;}
Les autres propriétés d'animation CSS3.
Il existe d'autres propriétés CSS3 pour paramétrer votre animation Css que je vous laisse découvrir :
- animation-timing-function : cette propriété css3 permet de spécifier la manière de progresser entre les images clés. Sa valeur par défaut est ease.
- animation-play-state : cette propriété css3 permet de mettre en pause l'animation Css. Sa valeur par défaut est running.
- animation-direction : cette propriété css3 permet de spécifier le sens de lecture de l'animation. Sa valeur par défaut est normal
- animation-delay : cette propriété css3 permet de spécifier un temps de latence avant de commencer la lecture de l'animation. Sa valeur par défaut est 0s.
- animation-direction : cette propriété css3 permet de spécifier permet de spécifier le sens de lecture de l'animation appliquée, notamment pour les répétitions. Sa valeur par défaut est normal.
En Css3 votre animation est regroupée dans une règle Css @keyframes.
Cette règle décrit les propriétés CSS à modifier par image clé. L'image clé correspond à un moment de votre animation Css et elle est identifiée par un pourcentage où 0% correspond à la première image clé (obligatoire) et 100% à votre dernière image clé (obligatoire).
Si la durée est de 20s (voir animation-duration) alors 0% correspond à la seconde 0 et 100% à la seconde 20 de l'animation Css3. Pour trouver la valeur du pourcentage de la seconde 10 de l'animation Css3, vous devez faire le calcul suivant : Seconde ciblée*100/Durée totale soit 10*100/20 = 50%. @keyframes nomanimation{
0%{ /* Propriétés css à modifier au départ */ }
50%{ /* Propriétés css à modifier à la 10s dans notre cas */ }
100%{ /* Propriétés css à modifier à la fin */ }
} Vous devez aussi donner un identifiant à votre animation Css3. Dans notre cas, l'identifiant est représenté par "nomanimation" dans l'exemple ci-dessus. L'identifiant doit être unique. Eviter les caractères spéciaux et les accents. Les propriétés CSS que l'on peut animer sont : les propriétés CSS de transformations, les propriétés css de couleurs, les propriétés css de positions, les propriétés css de tailles, les propriétés css de marges extérieures et de marges intérieures.
Comment déclencher une animation CSS3.
Déclencher une animation CSS3 à l'exécution.
Vous pouvez déclencher une animation CSS3 directement comme nous l'avons fait dans les exemples précédant.@keyframes monanimation {
0% {margin-left:0;}
100% {margin-left:100px;}
}
div.bloccible{ animation-name : nomanimation;}Mon animation est automatique.
Déclencher une animation CSS3 au changement d'état.
Vous pouvez déclencher votre animation CSS3 lors d'un changement d'état par exemple lorsque la souris survole l'élément qui doit être animé. Pour cela vous devez utilise une pseudo-classe comme :hover, :focus,...@keyframes monanimation {
0% {margin-left:0;}
100% {margin-left:100px;}
}
div.bloccible:hover{ animation-name : nomanimation;}Passer le curseur sur moi pour démarrer l'animation.
Déclencher une animation CSS3 à l'assignation d'une classe
Une autre possibilité pour déclencher votre animation CSS3, consiste à assigner en Javascript la classe à l'élément qui doit être animé. <style>@keyframes monanimation {
0% {margin-left:0;}
100% {margin-left:100px;}
}
.mon-animation{ animation-name : nomanimation;}</style>
<div id="bloc-anime" onclick="addAnimation()">element animable</div>
<script>
function addAnimation(){
// Avec Jquery
$("#bloc-anime").addClass("mon-animation")
// En javascript
document.getElementById("bloc-anime").classList.add("mon-animation")
}
</script> Cliquez moi pour lancer l'animation.
Animation vs transition.
En règle générale, vous utiliserez plus souvent des transitions (transition), car votre "Animation" se limite à un changement ne nécessitant que deux étapes.
Partez du principe que vous devez utiliser les transitions par défaut. Voici les éléments qui font que vous utilisez la propriété css @keyframes plutôt que la propriété css transition : - L'Animation doit se répéter.
- L'Animation a besoin de points intermédiaires.
- L'Animation démarre toute seule.
- L'Animation peut faire une pause.
Sachez aussi :
- que les Transitions sont plus simples à gérer en javascript.
- que lorsqu'une transition est interrompue durant son exécution, chaque propriété modifiée peut revenir à son état initial en étant animées, ce que ne peut pas faire les animations.
Compatibilité avec les navigateurs.
Je tiens compte du fait que vous avez mis aussi l'ensemble des propriétés préfixées (moz,webkit,o). La compatibilité dépendra aussi de la compatibilité de propriété css mise dans l'image clé.
Voici une petite fonction javascript pour tester, si le navigateur reconnait les animations CSS3. function haveAnimation(){
var animation = false, domPrefixes = ['Webkit','Moz','O','ms','Khtml'], elm = document.createElement("span");
if(typeof(elm.style["animationName"]) != 'undefined' ) { return true; }
for( var i = 0; i < 5; i++ ) {
if( typeof(elm.style[domPrefixes[i] + 'AnimationName' ]) != 'undefined' ) {
return true;
}
}
return false;
}
Quelle version prefixée est reconnue par votre navigateur ?
