Antisèche pour les courbes d'accélérations (easing functions)
Les courbes d'accélérations (easing functions) décrivent la vitesse à laquelle un paramètre change en fonction du temps.
Dans la vie, les objets ne se déplacent pas instantanément et ne bougent pratiquement jamais à vitesse constante. Lorsque nous ouvrons un tiroir, nous le déplaçons d'abord rapidement puis de plus en plus lentement jusqu'à ce qu'il soit complètement ouvert. Lorsque que nous faisons tomber quelque chose au sol, il va premièrement accélérer vers le sol puis rebondir.
Cette page vous aide à choisir les bonnes courbes d'accélérations.
Open Source
Aidez-nous à traduire ce site dans votre langue
x
t
CSS
En CSS, les propriétés de transition ou d'animation vous permettent de définir une courbe d'accélération.
.block { transition: transform 0.6s ; }
Modifier sur cubic-bezier.com.
En CSS, cette courbe peut être implémentée en utilisant les
@keyframes:Taille
Chargement...
Position
Chargement...
Transparence
Chargement...
PostCSS
En PostCSS, la courbe d'accélération est bien plus simple à décrire. Il y a un plugin postcss-easings qui prend les informations de transition depuis ce site.
.block { transition: transform 0.6s ; }
Cette déclaration est convertie par celle décrite plus haut.
Malheureusement, cette courbe d'accélération ne peut pas être définie avec tous les plugins PostCSS. Cela peut être réalisé avec les
@keyframes, pour plus d'informations, regardez plus haut.Dégradé
Il est possible de dessiner un dégradé en utilisant postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Fonction mathématique
Vous voyez ci-dessous le code de cette fonction d'accélération écrit en TypeScript. La variable x représente la progression de l'animation dans une plage variant de 0 (début de l'animation) à 1 (fin de l'animation).
function (x: number): number {
}Vous voyez ci-dessous le code de cette fonction d'accélération écrit en TypeScript. La variable x représente la progression de l'animation dans une plage variant de 0 (début de l'animation) à 1 (fin de l'animation).
function (x: number): number {
}Testez cette fonction:
Fonction sélectionnée:
Fonction sélectionnée
Fonction linéaire:
Fonction linéaire