Josh W. Comeau explique comment la fonction CSS linear() permet de créer des animations avancées (ressorts, rebonds, etc.) directement en CSS, sans dépendre de bibliothèques JavaScript. Contrairement aux courbes de Bézier traditionnelles, linear() utilise une série de points pour dessiner une courbe d'animation personnalisée, offrant ainsi plus de flexibilité. L'article présente des outils comme Linear() Easing Generator et EasingWizard pour générer automatiquement ces valeurs, optimisant ainsi la création d'animations fluides et naturelles. Cependant, cette approche a des limites : elle reste basée sur le temps (contrairement aux animations physiques réelles), peut mal gérer les interruptions, et nécessite beaucoup de points pour un rendu réaliste. Malgré cela, les tests montrent un impact minimal sur les performances. L'auteur recommande d'utiliser des variables CSS pour stocker les fonctions linear() et de prévoir des alternatives pour les navigateurs non compatibles. Une méthode efficace pour enrichir les animations CSS tout en respectant les préférences utilisateur (comme prefers-reduced-motion).
Cet article explore l'importance de prendre en compte les préférences des utilisateurs en matière d'animations sur les sites web, notamment grâce à la propriété CSS prefers-reduced-motion. Intégrée dans les navigateurs entre 2018 et 2020, cette préférence permet aux utilisateurs de réduire ou de supprimer les animations non essentielles, améliorant ainsi l'accessibilité pour ceux qui peuvent être gênés par les mouvements à l'écran. L'article explique comment utiliser cette propriété en CSS et JavaScript pour adapter les interfaces en fonction des préférences des utilisateurs, tout en fournissant des exemples de code pratiques.
L'auteur présente 2 règles CSS "at-rule" (@media ...) très pratiques pour l'accessibilité : prefers-color-scheme et prefers-reduced-motion