2026 : CSS linear() pour HTML statique — images clés, transitions et répétition Safari WebKit sur Mac

Les équipes marketing copient encore d’anciens quadruplets cubic-bezier et s’étonnent que l’accélération du hero paraisse « collante » dans Safari alors que Chrome reste fluide. La fonction linear() décrit des courbes de progression par morceaux via des paires de pourcentages explicites, ce qui colle mieux aux besoins modernes de animation-timing-function et transition-timing-function. En 2026, le HTML statique reste séduisant tant que les bundles restent légers, mais la courbe doit s’aligner sur des timelines pilotées par le défilement, prefers-reduced-motion et l’ordonnancement du compositeur WebKit. Traiter le mouvement comme simple décoration sous-estime l’accessibilité : si les visiteurs ont la nausée, aucune élégance mathématique ne sauvera l’expérience.

À lire en complément : nos articles sur les animations pilotées par le défilement et sur le scroll-padding avec en-tête fixe, pour éviter que les ancres et la navigation ne dépassent la cible.

Syntaxe et espacement des arrêts

Chaque arrêt liste une valeur de progression de sortie suivie d’un pourcentage d’entrée. Des pourcentages dupliqués créent des angles vifs ; un ease-out asymétrique demande au moins trois arrêts internes. Gardez le total entre cinq et neuf pour que les graphes DevTools et les revues de code restent lisibles.

.hero-card {
  transition: transform 420ms
    linear(0, 0.12 8%, 0.32 24%, 0.87 68%, 1);
}

Vérifiez que le dernier arrêt atteint bien 1 à l’entrée 100% ; sinon le dernier pixel semble téléporter comme un keyframe caché.

linear() face à cubic-bezier

Besoin	cubic-bezier	linear()	Note
Fondu simple	Excellent	Excessif	Les courbes classiques suffisent.
Overshoot marketing multi-étapes	Maladroit	Naturel	Encoder le rebond explicitement.
Tempo synchronisé au scroll	Rigide	Souple	Axe d’entrée = progression du scroll.

Liaison aux timelines de scroll

Lorsque animation-timeline référence une timeline de défilement nommée, l’axe d’entrée est la progression du scroll, pas le temps mural. Un milieu trop pentu ressemble à une double accélération. Si la course utile est inférieure à 400px, adoucissez le centre de la courbe.

prefers-reduced-motion

Sous @media (prefers-reduced-motion: reduce), ramenez les transitions d’opacité vers 120 ms ou terminez les transformations presque instantanément avec linear(0, 1). Le mode basse consommation de Safari regroupe les images : un léger scintillement peut passer pour un bug.

@supports et repli

Écrivez d’abord la ligne cubic-bezier, puis surchargez dans un test de fonctionnalité :

@supports (animation-timing-function: linear(0, 1)) {
  .hero-card { animation-timing-function: linear(0, 0.2 15%, 1); }
}

Stabilisez l’ordre des déclarations pour éviter qu’un minifier ne les permute.

Liste de contrôle Safari

1. Enregistrer à 120 ips si le matériel le permet et compter les micro-saccades.
2. Activer « Réduire les animations » dans macOS et recharger sans cache.
3. Tester le mode basse consommation sur batterie.
4. Comparer Technology Preview et Safari stable.

Compositeur et saccades

transform et opacity restent sur le compositeur ; filter blur combiné à linear() peut retomber sur le thread principal sur GPU anciens. Limitez les flous simultanés à deux éléments et décalez les démarrages de 40 ms.

Les longues pages statiques profitent du containment décrit dans nos articles scroll—ainsi les animations liées au scroll ne se battent pas avec des polices chargées tardivement.

Passation design

Demandez des graphes normalisés (temps 0–100 %, sortie 0–1). Ancrez « snap de marque » et « poser », puis interpolez jusqu’à ce que l’erreur reste sous 1 px CSS sur le viewport le plus étroit. Versionnez la chaîne approuvée avec une date pour éviter qu’un prettifier ne modifie la courbe.

Un audit motion annuel compare d’anciennes captures à l’état actuel—les changements d’interligne déplacent la perception même si les nombres sont identiques.

Points de rupture et requêtes de conteneur

Une courbe « nette » à 1440px semble molle à 390px car moins de pixels bougent par image. Maintenez --ease-hero-wide et --ease-hero-narrow avec une requête de conteneur vers 720px.

Discipline will-change

Saupoudrer will-change: transform épuise la mémoire de tuiles GPU sur de vieux MacBook Air. Limitez à trois indices simultanés dans le viewport et retirez-les sur animationend.

Mode données réduites

iOS « Données réduites » peut accepter un mouvement léger mais pas de grands cross-fades vidéo LCP. Un troisième jeu de jetons raccourcit distances et flous tout en gardant la même structure linear(). Documentez les assets qui changent pour ne pas casser le contraste.

Jetons de design et thèmes

Stockez les chaînes linear() en propriétés personnalisées à la racine, pas en inline par composant. Lorsque le marketing teste trois palettes, des jetons centraux évitent qu’un développeur ne mette à jour qu’une variante responsive. Exportez-les avec des captures Storybook pour que les tests de régression visuelle vérifient la même courbe qu’en production.

Le basculement sombre doit aussi ajuster l’intensité du mouvement : la nuit, les translations longues semblent plus agressives. Un second jeton linear() par thème coûte moins cher que des correctifs réactifs sur les réseaux sociaux.

CI, Percy et pièges du « presque pareil »

Les différences pixel marquent souvent les animations comme du bruit. Figez l’horloge dans Storybook ou mettez animation-play-state: paused avant Percy. Documentez quelles stories doivent bouger pour que les reviewers sachent quand un diff est réel.

Les tests visuels sur Chromium headless Linux ne reflètent pas le compositeur Safari. Prévoyez au moins une session Safari hebdomadaire sur matériel Apple—une instance Mac mini louée suffit.

Assistive tech et anneaux de focus

linear() affecte aussi les transitions de focus : un anneau trop lent « traîne » derrière le curseur et désoriente les utilisateurs clavier. Gardez-les sous 200 ms lorsque des animations de scroll tournent, ou attachez-vous à outline-offset plutôt qu’à de grandes translations.

Les lecteurs d’écran ignorent l’easing, mais les personnes à motricité réduite sentent le délai clic-réponse. Mesurez input-to-paint ; si le layout thrash retarde la peinture, la courbe est innocente mais paraît coupable.

Widgets tiers et cascade CSS

Chats, bannières cookies et widgets support injectent souvent des transition shorthand qui annulent vos linear(). Surveillez spécificité et ordre des couches ; parfois :where(.page-root .hero) ou @layer utilities est nécessaire.

Notez quels widgets posent !important. Prévoyez une escalade fournisseur ou un iframe à surface réduite—sinon la guerre de spécificité brûle des heures design.

Chiffres pour parties prenantes

Trois chiffres durs rassurent : translation hero max (ex. 24 px vertical), surface de flou simultanée (ex. 12 % du viewport), plafond d’animations scroll-couplées (ex. quatre). Ils tranchent les débats de goût plus vite que l’opinion.

Liez-les au risque business : temps passé sur la page tarifs si le hero saccade sous Safari, ou rebond mobile si les requêtes de conteneur manquent.

Pour la roadmap : consignez par release quels jetons linear() ont changé afin que le support ne signale pas de fausses régressions.

FAQ

linear() remplace-t-il cubic-bezier ?

Non, ils se complètent.

Avec animations pilotées par le scroll ?

Oui, avec plages bornées et tests compositeur.

prefers-reduced-motion ?

Raccourcir ou supprimer le déplacement spatial.

Combien d’arrêts ?

Viser cinq à neuf.

L’easing dépend fortement de la chaîne d’affichage. Louer un Mac mini Apple Silicon via MacHTML (environ 16,9 USD par jour) reproduit le pacing Safari, le gamma P3 et la teinte Night Shift—ce que les robots screenshot Linux ne voient pas. Gardez la machine une semaine de lancement, enregistrez côte à coude, puis éteignez : plus souple qu’une tour supplémentaire sous le bureau.

Les agences multi-clients isolent mieux les systèmes motion par profil macOS pour éviter la pollution des caches de polices et des ports de prévisualisation.