Animations javascript ou CSS3, quoi choisir ?

Depuis le CSS3 et la possibilité de créer des animations directement depuis nos feuilles de style, nous nous retrouvons face à un choix technologique : comment vais-je faire mes animations ? jquery ou CSS ?

Les animations CSS

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.

Les animations Javascript

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 navigateur le supportant pour lancer une action à la fin d'une transition CSS. Merci à Dorian Marchal pour cette info.

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écutions 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 fiable 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.

 

Velocity.js, pour accélérer les animation jQuery

Pour finir, laisse moi vous parler de Velocity.js. Cette library propose de remplacer les animations de jQuery par une version beaucoup mieux optimisée, tirant meilleur 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.

Pour conclure

 

En prenant en compte Velocity, il est possible de noter un net avantage au niveau performances pour les animations Javascript. Néanmoins, les cas où nous avons besoin de performances réel en web sont assez rare. 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.

Mon avis personnel est d'utiliser les deux : tous les petits changementss d'état, survol, et autres animations cosmétiques peuvent être gérées en CSS, tandis que les animations dont dépend l'application, où celles demandant beaucoup de ressources, peuvent être prises en charge par Velocity.js