L'animation est un sujet fascinant. Que vous souhaitiez ajouter des animations d'interaction telles que des transitions ou créer une expérience en plein écran, vous disposez de tous les outils dont vous avez besoin
L'animation est un sujet fascinant. Que vous souhaitiez ajouter des animations d'interaction telles que des transitions ou créer une expérience en plein écran, vous disposez de tous les outils dont vous avez besoin.
Et vous avez pas mal de choix, qui sont tous complètement différents et servent des objectifs différents.
CSSest généralement connu pour être plus performant, bien que JavaScript puisse également être très performant. Tout dépend de ce que vous devez faire et du temps nécessaire au rendu de chaque image.
Voyons un aperçu de ces options, pour savoir laquelle est le bon choix.
Transitions CSS
Transitions CSSavoir un début et une fin. Ils déplacent d'un point de X à Y, ou de visible à invisible.
C'est la plus simple des animations, et principalement utilisée pour des animations subtiles qui s'intègrent bien avec le reste de la page.
Avec les transitions, vous passez d'un état à un autre, mais vous ne pouvez pas en avoir beaucoup plus.
Animations CSS
Animations CSSpar rapport aux transitions CSS vous permettent d'avoir plus que 2 états, en fait vous pouvez en avoir beaucoup, et ils peuvent être utilisés pour créer des animations plus complexes.
Les animations CSS sont recommandées lorsque vous avez besoin d'animations relativement simples qui ne sont pas possibles avec des transitions.
Animations SVG
SVGest un excellent format vectoriel qui permet de créer des animations en utilisant SMIL, le format «natif» des animations SVG.
SMIL était sur le point d'être obsolète dans Chrome, mais l'équipe a annulé cette décision pour le moment en raison de la résistance, bien que SMIL présente des incohérences entre navigateurs (et IE / Edge ne le prend pas en charge).
Ils veulent pousser les animations CSS et l'API Web Animations au lieu de SMIL.
Animations de l'API Canvas
LeAPI Canvasoffre un moyen de peindre à l'écran, en utilisant des rasters plutôt que des vecteurs.
Les animations sont possibles mais pas aussi performantes
L'API Web Animations
L'API Web Animations est l'avenir des animations sur le Web. Il vise à apporter les performances des animations CSS avec la possibilité d'utiliser JavaScript pour créer facilement des animations plus longues.
Il ne fonctionne actuellement que dans Chrome et Firefox. Safari, IE et Edge y réfléchissent toujours, maisun polyfill existepour le faire fonctionner sur tous les navigateurs.
WebGL
WebGL vous permet de créer des animations 3D, et il est plus adapté aux expériences d'animations immersives en plein écran et à la réalité virtuelle, bien que plus complexes.
En plus des API natives, il existe d'excellentes bibliothèques qui résument la plupart des détails pour vous: