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
xt
easeInSine
xt
easeOutSine
xt
easeInOutSine
xt
easeInQuad
xt
easeOutQuad
xt
easeInOutQuad
xt
easeInCubic
xt
easeOutCubic
xt
easeInOutCubic
xt
easeInQuart
xt
easeOutQuart
xt
easeInOutQuart
xt
easeInQuint
xt
easeOutQuint
xt
easeInOutQuint
xt
easeInExpo
xt
easeOutExpo
xt
easeInOutExpo
xt
easeInCirc
xt
easeOutCirc
xt
easeInOutCirc
xt
easeInBack
xt
easeOutBack
xt
easeInOutBack
xt
easeInElastic
xt
easeOutElastic
xt
easeInOutElastic
xt
easeInBounce
xt
easeOutBounce
xt
easeInOutBounce

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