Comparez les options pour les animations sur le Web

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: