Cours ⇒ HTML5, CSS3 facebook twitter youtube

Les animations CSS | Les animations CSS


Vous avez la possibilité de faire des animations en CSS3 depuis CSS3.Mais , beaucoup navigateurs ne reconnaissent pas les propriétés CSS3 sans les avoir au préalable préfixées.

les-navigateur

 Il faut faire quatre déclarations  Pour  navigateurs:

@-webkit-keyframes nomanimation { ... } /* -webkit- Chrome et Safari */
@-moz-keyframes nomanimation { ... } /* -moz -Firefox */
@-o-keyframes nomanimation{ ... } /* -o- Opera */
@keyframes nomanimation{ ... } /* Navigateur aux normes w3c */
 

1-Déclarer une animation CSS3.

Votre animation est regroupé dans une règle @keyframes(*keyframesLa propriété css @keyframes permet de spécifier les images clés qui va composée votre animation. Vous devez aussi mettre les propriétés css préfixées : @-webkit-keyframes, @-moz-keyframes, @-o-keyframes.
@keyframes)

. Cette règle décrit les propriétés CSS à modifier par image clé.
L'image clé correspond à un moment de votre animation et 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 alors 0% correspond à la seconde 0 et 100% à la seconde 20 de l'animation. Si vous voulez cibler la seconde 10 de l'animation : 10*100/20 = 50%.

 
@keyframes nomanimation{
0%{ /* Propriété css à modifier au départ */ }
50%{ /* Propriété css à modifier à la 10s dans notre cas */ }
100%{ /* Propriété css à modifier à la fin */ }
}
 

ou

Il faut pour cela utiliser @keyframes, lui donner un nom, puis gérer les "étapes" en pourcentage à l’intérieur de cette déclaration. Les mots-clés from et to correspondent respectivement à 0 et 100%.

@keyframes nomAnim{ 
                   from { color:blue; }
                   35% { color:green; }
                   to { color:red; }
 }
 
 

Les animations se décomposent en plusieurs propriétés, décrites ici :

  • animation-name : le nom de l’animation à utiliser.
  • animation-duration : le temps total de l’animation.
  • view-tenthanimation-timing-functionview-tenth : la méthode d’interpolation (accélération, décélération). Voici quelques valeurs possibles : view-tenthlinearview-tenth, view-tentheaseview-tenth, view-tenthease-inview-tenth, view-tenthease-outview-tenth, view-tenthease-in-outview-tenth, view-tenthsteps (nombre, start | end)view-tenth, view-tenthcubic-bezier( p1, p2, p3, p4)view-tenth
  • animation-iteration-count : le nombre de répétition de l’animation. La valeur view-tenthinfiniteview-tenth permet de jouer une animation en continu.
  • animation-direction : permet de jouer une animation en sens inverse (en fonction du cycle).
  • animation-play-state : mettre en pause l’animation. En cours d’étude de suppression par le W3C.
  • animation-delay : le temps avant que l’animation ne démarre.
  • animation-fill-mode : conserver l’état de l’animation avant le début où après la fin de celle-ci
 

 

Exemples et astuces CSS animation

 

 

 

Equivalence avec les autres navigateurs

Pour Firefox 5.0+ et < 19, vous pouvez utiliser : -moz-animation.
Pour Chrome 2.1+ et Safari 4.0 +, vous pouvez utiliser : -webkit-animation.
Pour Opera 12+, vous pouvez utiliser : -o-animation.

Pour info, il semble les versions préfixées pour le animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété CSS -ms-animation mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre).

 

 



Les animations se décomposent en plusieurs propriétés, décrites ici : Voir Plus



>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces