Remplacer les animations JS par du CSS

quentin commented

2023-10-17 09:17:45 +00:00

Owner

Peut-être quelque chose avec la fonction steps() de la propriété animation-timing-functions permettrait de faire l'équivalent sans JS (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function#stepsn_jumpterm)

Un article qui en parle et inclu une démo https://muffinman.io/blog/css-only-sprite-animations/

Via @tixie

Peut-être quelque chose avec la fonction steps() de la propriété animation-timing-functions permettrait de faire l'équivalent sans JS (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function#stepsn_jumpterm) Un article qui en parle et inclu une démo https://muffinman.io/blog/css-only-sprite-animations/ Via @tixie

quentin added the

cat

perf

label 2023-10-17 09:20:12 +00:00

tixie commented

2023-10-17 09:51:30 +00:00

Owner

Note que ça me semble important de garder du JavaScript pour avoir un bouton permettant de mettre en pause/redémarrer l'animation. C'est une bonne pratique d'accessibilité de laisser la main sur ça à la personne visitant le site.

L'état initial de lecture (ou pas) de l'animation pourrait dépendre de la media query prefer-reduce-motion.

Note que ça me semble important de garder du JavaScript pour avoir un bouton permettant de mettre en pause/redémarrer l'animation. C'est une bonne pratique d'accessibilité de laisser la main sur ça à la personne visitant le site. L'état initial de lecture (ou pas) de l'animation pourrait dépendre de la media query [prefer-reduce-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

adrian referenced a pull request that will close this issue

2024-02-15 12:07:49 +00:00

WIP: feat/PausePlayButton closes #16, #30 #34

Remplacer les animations JS par du CSS #16