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