Les fonctions d'accélération CSS traditionnelles telles que ease-in ou cubic-bezier() sont limitées à des courbes simples, ce qui empêche de créer des effets physiques complexes tels que des rebonds ou des ressorts. La fonction de minutage linear() résout ce problème en vous permettant de fournir une série d'arrêts pouvant approximer des courbes complexes. Les transitions et les animations sont interpolées en fonction de lignes droites entre les arrêts, mais avec suffisamment d'arrêts, elles peuvent sembler fluides.
Mise en œuvre, étape par étape
- Générer les arrêts de la courbe :
Tracer manuellement des dizaines de points pour un effet de ressort ou de rebond n'est pas pratique. Utilisez une fonction de minutage d'une bibliothèque externe, ou utilisez un outil pour convertir une fonction d'accélération JavaScript existante ou un chemin SVG dans la syntaxe
linear(). Facultatif : stockez ces fonctions de minutage en tant que propriétés CSS personnalisées pour les réutiliser sur l'ensemble de votre site. - Définissez la fonction de minutage : appliquez les arrêts générés à la propriété
transition-timing-functionouanimation-timing-function, ou via les raccourcistransitionouanimation. - Ajuster la durée :
Contrairement aux moteurs physiques JavaScript, où la durée est dérivée des propriétés physiques (masse, rigidité), CSS nécessite toujours une valeur
durationfixe. Vous devrez peut-être ajuster la durée pour obtenir l'effet souhaité.
Exemple : Spring Easing
Cet exemple montre comment utiliser une fonction linear() personnalisée pour créer un effet de ressort qui dépasse la valeur cible avant de se stabiliser.
.spring {
/* Define the physics-based easing as a reusable variable */
--spring-easing: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);
/* Apply the easing with a duration that fits the spring's complexity */
/* MANDATORY: Always include a duration; linear() does not calculate it automatically */
transition: scale 0.8s var(--spring-easing);
}
.spring:hover {
scale: 1.2;
}
Exemple : Lissage de rebond
Cet exemple montre comment utiliser une fonction linear() personnalisée pour créer un effet de rebond.
.bounce {
/* Define the physics-based easing as a reusable variable */
--bounce-easing: linear(0, 0.214 14.7%, 0.386 23.7%, 0.598 31.9%, 0.999 44.7%, 0.807 52.6%, 0.762 56%, 0.747 59.4%, 0.758 62.4%, 0.793 65.6%, 0.999 77.4%, 0.961 81.2%, 0.949 84.8%, 0.956 88%, 0.993 95.5%, 1);
/* Apply the easing with a duration that fits the bounce's complexity */
/* MANDATORY: Always include a duration; linear() does not calculate it automatically */
transition: scale 0.4s var(--bounce-easing);
}
.bounce:hover {
scale: 1.2;
}
Points clés
- Performances : pour des animations basées sur des mécanismes physiques les plus fluides possible, appliquez
linear()aux propriétés qui s'exécutent sur un thread distinct, telles quetransformetopacity. - Précision et charge utile : plus il y a de points d'arrêt, plus la courbe est fluide, mais plus la taille de votre CSS augmente. La plupart des générateurs vous permettent de "simplifier" la courbe pour trouver l'équilibre optimal entre fluidité et taille du code.
- Évitez l'opacité pour les rebonds : l'application d'accélérations de rebond à
opacitypeut provoquer un scintillement visuellement gênant si la valeur dépasse 0 ou 1. - Accessibilité : les animations complexes basées sur la physique peuvent être distrayantes ou provoquer une sensibilité au mouvement chez certains utilisateurs. Respectez toujours les préférences des utilisateurs en réduisant ou en désactivant ces animations.
@media (prefers-reduced-motion: reduce) {
.element {
transition: none;
}
}
Stratégies de remplacement
CSS de remplacement
Pour les navigateurs qui ne sont pas compatibles avec linear(), fournissez une fonction d'accélération standard en tant que solution de remplacement. Le navigateur ignorera la valeur linear() s'il ne la reconnaît pas, et reviendra à la déclaration valide précédente.
.element {
/* Fallback for older browsers (standard smooth exit) */
transition: transform 0.8s ease-out;
/* Modern browsers will override with the physics-based easing */
transition-timing-function: linear(0, 1.1, 0.95, 1.02, 1);
}
JavaScript Library Fallback (Motion/GSAP)
Facultatif : Si une animation physique haute fidélité est essentielle, même dans les anciens navigateurs, utilisez une bibliothèque JavaScript telle que Motion (motion.dev) ou GSAP (greensock.com) pour gérer l'animation lorsque linear() n'est pas compatible.
- Détecter la compatibilité : utilisez
CSS.supports()pour vérifier si le navigateur gère la fonctionlinear(). - Charger/Appliquer de manière conditionnelle : si l'effet n'est pas compatible, utilisez l'implémentation de ressort ou de rebond de la bibliothèque.
/* Detect if the browser supports the linear() function */
const supportsLinearEasing = window.CSS && CSS.supports('animation-timing-function', 'linear(0, 1)');
if (!supportsLinearEasing) {
/*
Example using Motion (motion.dev) for a spring fallback.
This should only be initialized if native CSS support is missing.
*/
import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {
animate(".element", { transform: "scale(1.2)" }, {
easing: spring({ stiffness: 100, damping: 10 })
});
});
}
Vous pouvez également utiliser @supports en CSS pour une détection plus explicite des fonctionnalités :
@supports not (animation-timing-function: linear(0, 1)) {
.element {
/* Alternative experience for unsupported browsers */
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
}