CSS3 animations

Transitions

Les transitions CSS permettent de controler la vitesse d'animation à laquelle une propriété CSS est modifiée. Plutôt que de changer abruptement, une propriété varie ainsi au cours d'une période de temp donnée. Par exemple, si vous changez la couleur d'un élément du blanc vers le noir, le changement est instantané. En utilisant une transition CSS, le changement s'effectue au cours d'un intervalle de temps et suivant une courbe d'accélération, ces deux facteur pouvant être configurés.

• propriétés :
  • transition: property duration timing-function delay;
  • transition-delay: indique la durée à attendre avant de débuter la transition
  • transition-duration: définit le nombre de secondes ou de millisecondes que doit durer une animation
  • transition-property: désigne les noms des propriétés CSS sur lesquelles un effet de transition devrait être appliqué.
  • transition-timing-function: décrit comment les valeurs intermédiaires des propriétés CSS affectées par un effet de transition sont calculées.
• Evènement JS
  • transitionend : $('a').on('transitionend', function(){ });

Animations

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.

• Déclarer une animation
  • @keyframes { 0% { top: 0; } 50% { top: 30px; left: 20px; } 50% { top: 10px; } 100% { top: 0; } }
  • @keyframes { from { top: 0; } to { top: 10px; } }
• Utiliser une animation
  • animation: duration timing-function delay iteration-count direction fill-mode play-state name;
  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running
• Evénements JS
  • animationstart
  • animationend
  • animationiteration

Transformations

En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations afines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

• transform: transformation
• transform-origin: permet de modifier le point d'origine du repère utilisé par la transformation
• transform-style: dans le cas d'une transformation 3D, permet d'indiquer si les éléments enfants sont dans un plan 3D distinct ou aplatis dans le plan de l'élément sur lequel est appliqué la transformation
• transform-box: défini à quel type de box s'applique la transformation (similaire à box-sizing mais pour les transformations)
• perspective: permet d'ajuster la dimension de la perspective dans le cas d'une transformation dans un plan 3D
• perspective-origin: permet de définir le point d'origine de la perspective (par défaut il s'agit du centre de l'élément)
• backface-visibility: permet de définir si la vue arrière d'un élément doit être visible comme dans un miroir si le cas se présente (dans une rotation 3D par exemple, comme une carte)

Transformations

• translate, translateX, translateY, translateZ, translate3d
• rotate, rotateX, rotateY, rotateZ, rotate3d
• scale, scaleX, scaleY, scaleZ, scale3d
• skew, skewX, skewY
• matrix, matrix3d
• perspective

Compatibilité

• Les préfixes propriétaires: Les spécifications mettant du temps à être validées, les navigateurs ont souvent tendance à mettre en place une syntaxe qui les arrange en attendant qu'elle soit finalisée. Ils utilisent donc des préfixes pour chaque propriété :
  • -moz- pour Mozilla Firefox
  • -webkit- pour Safari, Chrome et Opera
  • -ms- pour Internet Explorer et Edge
• compatibilité navigateurs :
  • caniuse.com
  • html5please.com

Avantages CSS sur JS

On compte trois avantages des animations CSS par rapport aux techniques d'animation utilisant des scripts habituelles :

• 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.
• Laisser le navigateur contrôler la séquence d'animation permet au navigateur d'optimiser sa performance et son efficacité en réduisant la fréquence de mise à jour des animations dans les onglets non visibles par exemple.