Les animations sur le Web font actuellement couler beaucoup d'encre. Entre autres choses, il existe actuellement deux modèles déclaratifs concurrents : Les transitions et animations CSS3 d'un côté et les animations SMIL utilisées dans SVG de l'autre.

Du point de vue de la maturité des modèles, les animations CSS sont une proposition récente d'Apple là ou les animations SMIL sont spécifiées au sein du W3C depuis plus de 10 ans. Mais cela importe peu car du point de vue des implémentations, l'une comme l'autre n'ont été introduites dans les navigateurs qu'assez récemment.

Ainsi, Firefox, Chrome, Safari, Opera et Internet Explorer supportent tous plus ou moins bien les deux modèles. Bien sûr, chaque navigateur à des priorités différentes sur la question :

  • Firefox essaie d'avoir quelque chose d'équilibré
  • Opera privilégie les animations SVG (une première implémentation des animations CSS ne sera disponible qu'à partir de Opera 12)
  • Chrome et Safari privilégient les transitions et animations CSS
  • Internet Explorer de son côté à fait le choix de n'implémenter que les animations CSS dans IE10 et se refuse à supporter les animations SVG.

À noter que quels que soient les choix des uns et des autres, les implémentations des transitions et animation CSS restent toutes préfixées car les spécifications sont loin d'être terminées

Si Microsoft a un parti-pris assez radical, il ne faut pas s'y tromper. Le fait d'avoir deux modèles d'animation embête tout le monde : Les fabricants de navigateurs d'une part car maintenir 2 modèles qui sont parfois assez éloignés l'un de l'autre n'est pas sans poser des problèmes, surtout avec l'arrivée de HTML5 qui autorise à mélanger HTML et SVG ; D'autre part les auteurs de sites ou d'applications Web qui doivent se poser beaucoup de questions assez compliquées pour savoir quelle technologie choisir pour quel usage. Bref, vous l'aurez compris, c'est le bazar.

Autant le dire, arriver à trouver un terrain d'entente pour réunir et normaliser ces deux modèles n'est pas une partie de plaisir (encore une fois, chaque fabricant de navigateur a ses propres priorités industrielles). Cependant, au vu des attentes des développeurs et designers Web, les fabricants de navigateurs ont décidé de s'atteler à la tâche au sein du W3C. Ainsi, le CSS Working Group et le SVG Working Group ont créé une équipe chargée de travailler sur le rapprochement et l'harmonisation de ces 2 technologies : la "Effect Task Force" (FX TF). Ici, je vous parle des animations, mais sachez que cette équipe travaille également sur d'autres points de convergence techniques comme les transformations et les filtres.

Cette équipe s'est récemment réunie (elle le fait à peu près tous les 3 à 4 mois) et il est intéressant de voir qu'à cette occasion, de très intéressantes propositions ont été amenées pour faire avancer le Schmilblick :

  1. Déjà, il faut savoir que le modèle en "sandwich" des animations est en passe d'être résolu (il s'agit de la question des priorités à appliquer quand une animation CSS et une SVG animent une même propriété en même temps)
  2. Ensuite il est intéressant de noter que les animations SVG vont intégrer les notions de "time container" provenant de SMIL afin de simplifier la synchronisation des animations (chose qui fait toujours défaut aux animations CSS)
  3. Enfin, Mozilla, Google et Adobe ont, à l'occasion de cette rencontre, dévoilé une proposition d'API impérative visant à réunifier les modèles CSS et SVG sans pour autant devoir changer leurs modèles déclaratifs respectifs (j'en profite pour adresser mes remerciement à Brian Britles, développeur plateforme chez Mozilla, qui fait un travail énorme sur cette question).

Alors certes, la route est encore longue avant de voir tout cela se concrétiser dans les implémentations et les spécifications. Mais malgré tout, quand on voit la qualité et la vitesse des travaux menés on voit bien que le ciel s'éclaircit et que les choses vont en s'améliorant. 

En attendant, vous pouvez aussi participer : Si vous avez des remarques sur ces différents éléments (cas d'usage non-couverts, incohérence des spécifications, proposition pour simplifier une API, etc.) n'hésitez pas à écrire sur les listes de diffusion public du W3C :

  • CSS WG pour discuter à propos de CSS
  • SVG WG pour discuter à propos de SVG
  • FX TF pour discuter des deux ;)