Acordeón de Funciones de Suavizado

Las funciones de suavizado especifican la razón de cambio de un parámetro sobre el tiempo.

Los objetos en la vida real solo no inician y paran instantáneamente, y casi nunca se mueven a una velocidad constante. Cuando abrimos un cajón, primero lo movemos rápidamente y vamos más despacio conforme va saliendo. Deja caer algo al piso, y este primero se acelera hacia abajo, y luego rebota de vuelta hacia arriba después de golpear el piso.

Esta página te ayuda a elegir la función de suavizado correcta.

Open Source
Ayuda a traducir el sitio a tu idioma
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, las propiedades 'transition' y 'animation' te permiten especificar una función de suavizado.
.block {
	transition: transform 0.6s ;
}
Editar en cubic-bezier.com.
En CSS, esta función puede ser implementada usando @keyframes:
Tamaño
Cargando...
Posición
Cargando...
Transparencia
Cargando...
PostCSS
En PostCSS, la función de suavizado es mucho más fácil de describir. Existe un plugin postcss-easings que toma la información de transición de ese sitio.
.block {
	transition: transform 0.6s ;
}
Tal declaración es convertida a la que es descrita arriba.
Desafortunadamente, la función de suavizado no puede ser establecida con ningún plugin PostCSS. Puede hacerse con @keyframes, ver arriba.
Gradiente
Es posible dibujar un gradiente usando postcss-easing-gradients.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Función Matemática
Abajo verás el código de esta función de suavizado escrito en TypeScript. La variable x representa el progreso absoluto de la animación en los límites de 0 (inicio de la animación) y 1 (fin de la animación).
function (x: number): number {
}
Abajo verás el código de esta función de suavizado escrito en TypeScript. La variable x representa el progreso absoluto de la animación en los límites de 0 (inicio de la animación) y 1 (fin de la animación).
function (x: number): number {
}
Comprobar suavizado por cambios:
Functión actual:
Functión actual
Función linear:
Función linear