#Barcamp : Animation et transition CSS3

Animation.

Les animations CSS rendent possible la création de transitions animées depuis une décoration CSS à une autre. Les animations consistent en deux composants : un style décrivant l’animation et un ensemble de keyframes qui indique les états de début et de fin du style CSS de l’animation, ainsi que des points de passage intermédiaires.

Il y à trois avantages à utiliser les animations en css plutôt qu’en javascript :

  • Elles sont faciles à utiliser pour les animations simples. Leur création est possible sans aucune connaissance en JavaScript.
  • Les animations sont fluides, même avec un système plutôt chargé. De simples animations JavaScript peuvent parfois être lentes (sauf si elles sont réalisées intelligemment).
  • Laisser le navigateur contrôler la séquence d’animation permet au navigateur d’optimiser sa performance et son efficacité.

Comment déclarer une animation ?

Pour créer une animation il faut la déclarer grâce au décorateur @keyframe, la nommer et définir ses propriétés à l’intérieur.

Les propriété sont définit à un instant T de l’animation. Il faut donc s’imaginer une barre de progression. Cette barre à pour unité le %. Donc le point de départ est 0%, et le point d’arrivée est 100%. le 0% et le 100% possèdent des alias qui sont plus intuitif, from et to :

Notre animation slidein est donc créer, mais cela n’est pas suffisant il faut maintenant la configurer.

Configurer une animation.

Pour configurer  l’animation on choisit l’élément à animer ici une balise p, et grâce à la propriété animation, en définir le comportement :

ici, on définit que la durée de l’animation est de 3 secondes, et le nom de la keyframe utilisée.

il existe plusieurs sous propriétés d’animation :

  • animation-name : le nom de l’animation à utiliser.
  • animation-duration :  le temps total de l’animation.
  • animation-timing-function : la méthode d’interpolation (accélération, décélération). Voici quelques valeurs possibles : linear, ease, ease-in, ease-out, ease-in-out, steps (nombre, start | end), cubic-bezier( p1, p2, p3, p4)
  • animation-iteration-count : le nombre de répétition de l’animation. La valeur infinite 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.

 

Transition CSS

Les transition CSS permettent d’animer les pages web très simplement. Pour ce faire deux propriétés nécessaire au minimum :

transition-property : précise les propriétés à transformer

transition-duration : précise la durée de transition

Optionnellement on à aussi :

transition-timing-function permet de faire des accélération, décélaration etc…

transition-delay : précise le retard (ou l’avance) de la transition

 

Une transition s’écrit de la manière suivante :

La valeur all anime toute les propriétés animables. On peut aussi préciser la/les propriétés que l’on veux animer. Vient ensuite la durée de transition qui peut être préciser en s ou ms et enfin l’effet voulu ici ease-out.

L’effet de transition est présent, mais il faut l’activer donc les pseudo-classe ont une grande importance ici pour appliquer la transition au survol ou sur le focus.

 

Source :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.