Acordeón de Funciones de Suavizado

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

En la vida real, los objetos no se inician ni se detienen por sí solos instantáneamente, y casi nunca se mueven a una velocidad constante. Por ejemplo, cuando abrimos un cajón, el movimiento de jale o apertura se hace rápidamente al principio, y conforme dicho cajón sale, el movimiento se hace más despacio. También; si se deja caer un objeto al piso, este primero se acelera hacia abajo hasta golpear el piso y luego rebota de vuelta hacia arriba.

Esta página te ayuda a elegir la función de suavizado correcta para usar en animaciones con CSS.

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 degradado 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