La technique d’animation CSS basée sur le temps

Utiliser une approche basée sur le temps pour les animations CSS

• Le support des fonctions mathématiques en CSS permet de réappliquer une approche d’animation CSS basée sur le temps
  • Les fonctions mod(), round() et les fonctions trigonométriques sont prises en charge
  • Il peut être nécessaire d’activer un flag de fonctionnalité expérimentale pour voir la démo

Idée de base

• Grâce à l’API CSS Houdini, il est possible de définir une variable personnalisée pour suivre le temps en millisecondes
  • Utiliser la règle @property pour définir la variable --t et définir sa valeur initiale à 0
  • Utiliser la règle @keyframes pour augmenter linéairement --t sur 24 heures (86,400,000ms)
  • Les autres valeurs basées sur --t changent également afin de créer un effet d’animation
  • Utiliser la fonction counter() pour afficher la valeur de la variable --t

Contrôle du framerate

• Maintenir une fréquence de mise à jour à 60 images par seconde (FPS) suffit pour obtenir une animation fluide
• Si nécessaire, il est possible de contrôler manuellement le framerate avec la fonction step()
  • Utiliser la fonction step() dans la propriété animation-timing-function pour calculer la valeur FPS souhaitée

Transformation temporelle

• Comme la valeur de --t augmente continuellement dans un seul sens, elle peut ne pas convenir à certains attributs CSS
• Il est possible d’arrêter l’animation lorsque la valeur ciblée est atteinte avec la fonction min()
• Il est possible de redémarrer l’animation avec la fonction mod()
• Il est possible de créer un mouvement d’aller-retour avec la fonction sin()

Fonctions d’easing personnalisées

• À l’aide des fonctions mathématiques et de la variable --t, il est possible de créer des fonctions d’easing personnalisées
• Il est possible d’obtenir des effets difficiles à réaliser avec cubic-bezier()
• Exemples : ease-out-cubic, ease-out-elastic, etc.

Expérimentations CSS Doodle

• Pour les expressions complexes, var() et calc() peuvent réduire la lisibilité du code
• Dans css-doodle, la variable --t peut être représentée grâce à la fonction @t
• Les versions récentes de css-doodle autorisent directement de simples expressions mathématiques dans les arguments
• Les fonctions @T et @TS sont également disponibles
  • @T représente le temps depuis le début de la journée
  • @TS est un raccourci de @t(/1000), il suit le temps en secondes
• Il est possible d’implémenter des exemples d’horloge et de saut avec css-doodle

Conclusion

• Cette approche consistant à utiliser le temps comme variable est intéressante
• Les keyframes peuvent être plus intuitives, mais lorsqu’il s’agit de scènes de démo avec de nombreux calculs mathématiques et variables d’entrée, utiliser le temps comme variable permet d’obtenir des résultats plus variés

Remarques de GN⁺

• La technique d’animation CSS basée sur le temps ne se contente pas d’élargir la palette des animations réalisables en CSS, mais semble aussi augmenter les possibilités d’utilisation conjointe avec d’autres technologies telles que les shaders ou WebGL
• Combinée à des outils comme CSS Houdini et CSS Doodle, elle devrait permettre des expressions encore plus flexibles et variées
• Il subsistera toutefois des points à prendre en compte lors d’une mise en production, comme les questions de compatibilité navigateur ou les problèmes de performance. Il est préférable de comparer en détail les avantages et limites de l’approche par keyframes existante pour l’utiliser de manière sélective
• Il faudrait également analyser les avantages et les inconvénients par rapport aux bibliothèques d’animation spécialisées comme GSAP, et il serait judicieux d’explorer des solutions permettant une utilisation complémentaire
• On peut espérer que davantage d’exemples et de cas d’usage d’animations CSS basées sur le temps soient partagés, afin que les développeurs front-end puissent plus facilement les appliquer

[GN⁺]

Commentaires Hacker News

• On peut utiliser des valeurs négatives de animation-delay en CSS pour piloter la progression d’une animation en JavaScript. Par exemple, définir animation-delay: -1500ms la lance immédiatement mais la fait sauter à la position de 1,5 s. En manipulant cette valeur avec JavaScript, il est possible de faire du scrubbing d’animations CSS et de rendre toutes les animations compatibles avec une boucle tick calcul-mise-à-jour-rendu de style moteur de jeu.

• Dès qu’on dépasse un easing simple ou des keyframes basiques sur un ou deux canaux, on tombe vite sur les limites de cette approche. L’usage de la bibliothèque Theatre.js est utile quand on a besoin d’animations réglées précisément, car elle se compose d’une UI studio avec une timeline pour éditer les keyframes et les courbes de Bézier, ainsi que d’un runtime qui interpole les valeurs dans cette timeline.

• L’article utilise la propriété CSS personnalisée @property, qui bénéficie de 88 % de support navigateur. Il faut noter que chaque navigateur gère différemment les valeurs par défaut. Chrome applique la valeur initiale si la valeur est indéfinie ou invalide, alors que Firefox ne le fait que lorsqu’elle est indéfinie. Cela ne posera probablement pas de problème pour la plupart des projets, mais pour harmoniser les divergences d’implémentation entre navigateurs, il peut être nécessaire de définir la valeur par défaut de Firefox via JavaScript.

• CSS prend en charge un ensemble suffisant de fonctions mathématiques comme mod(), round() et les fonctions trigonométriques. CSS ne peut pas démarrer un timer comme JavaScript, mais aujourd’hui, grâce à l’API CSS Houdini, on peut définir des variables personnalisées pour suivre le temps en millisecondes. Pourquoi a-t-on besoin de tout cela si on a déjà JavaScript ? La couche de rendu n’aurait-elle pas vocation à se concentrer uniquement sur les primitives de rendu ? Pourquoi cherche-t-on à empiler de plus en plus de couches d’un niveau élevé ?

• La clock rendue est vraiment élégante. C’est un excellent article. Chrome n’a pas encore déployé le support CSS de mod(), donc sans utiliser une version préliminaire, la plupart des démos de la page ne s’animera pas.

• Si vous voulez des animations CSS fluides sur tous les navigateurs sans contrôler les ticks, la méthode FLIP est très utile.

• J’aurais aimé faire un exercice de type « box breathing », personnalisant chaque phase d’inspiration-paix/arrêt-expiration-paix/arrêt pour l’adapter à mon corps et obtenir l’effet souhaité, mais je n’ai pas trouvé d’autre moyen pour faire ça autrement (sans JS ni complexité démesurée). Il y a des démos vraiment créatives sur cette page !

• Fait intéressant, les démos d’avant mod() fonctionnent, mais mod() et sin() ne font strictement rien sur Chrome Android récent.

• L’animation en bas de page est très impressionnante. On dirait plutôt un élément qu’un.

• C’est très impressionnant, mais d’une certaine manière on se rapproche de ce qu’on pouvait faire avec Flash il y a des décennies. Je ne souhaite pas le retour de Flash, mais j’aimerais qu’on ait des outils plus conviviaux pour créer des animations CSS.