Les animations CSS3.

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 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.

Vous trouverez plus bas les compatibilités navigateurs concernant animations en CSS3.

Déclarer une animation CSS3.

En Css3 votre animation est regroupée dans une règle Css . 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.

Paramétrer votre animation CSS3.

Maintenant que nous avons décrit en CSS3 le comportement de notre animation grâce à la règle CSS3 , 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 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 .
Cette durée peut être exprimée en :
- secondes, le nombre sera suivit par "s"
- millisecondes : le nombre sera suivit 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 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 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 :
- : 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.
- : cette propriété css3 permet de mettre en pause l'animation Css. Sa valeur par défaut est running.
- : cette propriété css3 permet de spécifier le sens de lecture de l'animation. Sa valeur par défaut est normal
- : 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.
- : 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.

Déclencher une animation CSS3.

Directement à 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.

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 comme , ,...@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.

Assignation d'une classe

Une autre possibilité pour déclencher votre animation CSS3, consiste à à 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 (), 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 plutôt que la propriété css :
- 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é.

Propriété d'animation prefixée -webkit- compatible avec le navigateur Chrome 2.1+
Chrome 2.1+
Propriété d'animation prefixée -moz- compatible avec le navigateur FireFox 5+
FireFox 5+
Propriété d'animation CSS3 compatible avec le navigateur FireFox 19+
FireFox 19+
Propriété d'animation prefixée -webkit- compatible avec le navigateur Safari 4+
Safari 4+
Propriété d'animation CSS3 est compatible avec le navigateur Internet Explorer 10+
Inter. Expl. 10+
Propriété prefixée -o- d'animation est compatible avec le navigateur Opera 12+
Opera 12+

Exemples d'animation CSS3.

Exemple d'animation Css de couleurs : @-webkit-keyframes nomanimationa {
 0%{background-color:red;}
 25%{background-color:yellow;}
 50%{background-color:fuchsia ;}
 100%{background-color:green;}
}
@-moz-keyframes nomanimationa {
 0%{background-color:red;}
 25%{background-color:yellow;}
 50%{background-color:fuchsia ;}
 100%{background-color:green;}
}
@-o-keyframes nomanimationa {
 0%{background-color:red;}
 25%{background-color:yellow;}
 50%{background-color:fuchsia ;}
 100%{background-color:green;}
}
@keyframes nomanimationa{
 0%{background-color:red;}
 25%{background-color:yellow;}
 50%{background-color:fuchsia ;}
 100%{background-color:green;}
}
div.exemplea{
 -webkit-animation-name : nomanimationa;
 -moz-animation-name : nomanimationa;
 -o-animation-name : nomanimationa;
 animation-name : nomanimationa;
 -webkit-animation-duration : 10s;
 -moz-animation-duration : 10s;
 -o-animation-duration : 10s;
 animation-duration: 10s;
 width:100%;
 height:15px;
 background-color:red;
}

Laisser le curseur sur moi, pour voir l'exemple d'animation.

Exemple d'animation de couleurs avec mise en pause : @-webkit-keyframes nomanimationa {
 0%{background-color:red;}
 25%{background-color:yellow;}
 50%{background-color:fuchsia ;}
 100%{background-color:green;}
}
@-moz-keyframes nomanimationa {
 0%{background-color:red;}
 25%{background-color:yellow;}
 50%{background-color:fuchsia ;}
 100%{background-color:green;} }
@-o-keyframes nomanimationa {
 0%{background-color:red;}
 25%{background-color:yellow;}
 50%{background-color:fuchsia ;}
 100%{background-color:green;}
}
@keyframes nomanimationa{
 0%{background-color:red;}
 25%{background-color:yellow;}
 50%{background-color:fuchsia ;}
 100%{background-color:green;}
}
div.exemplea{
 -webkit-animation-name : nomanimationa;
 -moz-animation-name : nomanimationa;
 -o-animation-name : nomanimationa;
 animation-name : nomanimationa;
 -webkit-animation-duration : 10s;
 -moz-animation-duration : 10s;
 -o-animation-duration : 10s;
 animation-duration: 10s;
 width:100%;
 height:15px;
 background-color:red;
}

Laisser le curseur sur moi, pour me mettre en pause.

Exemple d'animation de couleurs avec mise en pause : @-webkit-keyframes nomanimationc {
0%{ webkit-transform : rotate(1deg); transform : rotate(1deg); }
100%{ -webkit-transform : rotate(360deg); transform : rotate(360deg); }
}
@-moz-keyframes nomanimationc {
0%{ -moz-transform : rotate(1deg); transform : rotate(1deg); }
100%{ -moz-transform : rotate(360deg); transform : rotate(360deg); }
}
@-o-keyframes nomanimationc {
0%{ -o-transform : rotate(1deg); transform : rotate(1deg); }
100%{ -o-transform : rotate(360deg); transform : rotate(360deg); }
}
@keyframes nomanimationc{
0%{
-webkit-transform : rotate(1deg); -moz-transform : rotate(1deg);
-o-transform : rotate(1deg); transform : rotate(1deg);
}
100%{
-webkit-transform : rotate(360deg); -moz-transform : rotate(360deg);
-o-transform : rotate(360deg); transform : rotate(360deg);
}
}
.exemplec:hover {
-webkit-animation-play-state : paused; -moz-animation-play-state : paused;
-o-animation-play-state : paused; animation-play-state : paused;
}
.exemplec {
 -webkit-animation-name : nomanimationc;
 -moz-animation-name : nomanimationc;
 -o-animation-name : nomanimationc;
 animation-name : nomanimationc;
 -webkit-animation-duration : 10s;
 -moz-animation-duration : 10s;
 -o-animation-duration : 10s;
 animation-duration: 10s;
 -webkit-animation-iteration-count : infinite;
 -moz-animation-iteration-count : infinite;
 -o-animation-iteration-count : infinite;
 animation-iteration-count : infinite;
display:block; height:15px; width:200px; padding:1em; }

Laisser le curseur sur moi .

Tester la compatibilité en Javascript

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;
}