Animations JavaScript ou CSS3 que choisir ?

Les animations CSS sont plus rapide que les animations jQuery, ce qui est déjà un point très important. En effet, vu qu'elles sont intégrées directement par les navigateurs, il est plus simple pour elle de tirer toute la puissance de la machine cliente.

Les animations étant souvent purement cosmétiques (au survol ou pour illustrer un changement d'état), il est logique de les mettre dans le CSS, pour centraliser l'apparence de notre site à ce seul langage.

Les transitions CSS ont un fallback intégré. Elles ne sont pas lues, mais cela n'empêche pas les états finaux de ces animations de s'afficher. On perd l'effet fluide, mais l'application / le site reste complètement fonctionnel.

Il est possible d'exécuter une action JavaScript à la fin d'une animation jQuery, ce qui est impossible en CSS. Envie de faire disparaitre une page en fondu, lancer le chargement d'une autre page, puis faire apparaitre cette dernière en fondu toujours ? Avec les callbacks (des actions à exécuter une fois une animation finie), l'enchainement est très simple.

Edit : il est possible d'utiliser l'évènement transitionend sur les navigateurs le supportant pour lancer une action à la fin d'une transition CSS. Merci à Dorian Marchal pour cette information.

Les animations JavaScript seront lisibles sur un spectre de navigateur bien plus large. Même IE7 peut lire une animation JavaScript, alors que IE9 n'est pas capable de faire une transition CSS.

Les animations JavaScript sont mieux "optimisées" que les animations CSS pour travailler avec le JavaScript. En effet, la plupart des frameworks JavaScript vont prendre en compte l'exécution des animations lors de l'exécution d'autres codes javascript, ou même d'autres animations. Le résultat est que les animations JavaScript seront plus fluides dans certaines conditions (lorsque beaucoup de transitions s'appliquent en même temps).

Les animations JavaScript sont plus fiables que les animations CSS. En effet, certains navigateurs peuvent, aux files des versions, intégrer des bugs et artefacts visuels lors de l'exécution de transition (essayez beaucoup de transition plus des éléments en position fixe sur la même page sous chrome, vous m'en direz des nouvelles). Les animations JavaScript restent égales à elle-même.

Pour finir, nous vous présentons Velocity.js. Cette library propose de remplacer les animations de jQuery par une version beaucoup mieux optimisée, tirant meilleure partie du matériel de la machine du client.

Le résultat est que les animations Velocity sont en toute occasion plus rapide que les animations CSS3 ! Cela se fait sentier surtout lors de l'augmentation du nombre d'éléments animée en même temps.

En prenant en compte Velocity, il est possible de noter un net avantage au niveau des performances pour les animations JavaScript. Néanmoins, les cas où nous avons besoin de performances réel en web sont assez rares. Qu'il soit animé en JavaScript ou en CSS, un simple hover de bouton a très peu de chances de ne pas être fluide.

Les animations CSS3, en revanche, sont plus simples à mettre en place et s'intègrent parfaitement dans le rôle de l'intégrateur. Ce dernier peut donc tout à fait les gérer lui-même sans connaissance du JavaScript. De plus, leur fallback "intégré" est très pratique pour les animations purement cosmétiques.

On vous conseille d'utiliser les deux : tous les petits changements d'état, survol et autres animations cosmétiques peuvent être gérées en CSS. Cependant, les animations dont dépend l'application, où celles demandant beaucoup de ressources, peuvent être prises en charge par Velocity.js