Propiedad animation-timing-function
La propiedad animation-timing-function
establece la velocidad de cambio (aceleración)
de la animación. Por ejemplo, primero lento, luego
rápido, después lento de nuevo, etc.
Sintaxis
selector {
animation-timing-function: valor;
}
Valores
| Valor | Descripción |
|---|---|
ease |
Primero lento, luego rápido, al final nuevamente lento. |
ease-in |
Comienza lentamente y se acelera gradualmente. |
ease-out |
Comienza rápidamente y se detiene gradualmente. |
ease-in-out |
Primero lento, luego rápido, al final nuevamente lento. Se diferencia de ease en la velocidad. |
linear |
Siempre la misma velocidad. |
step-start |
No hay animación, la propiedad toma inmediatamente el valor final. |
step-end |
No hay animación, la propiedad espera el tiempo
establecido en animation-duraton,
y luego toma instantáneamente el valor final.
|
steps |
El valor de la propiedad cambia a saltos. |
cubic-bezier |
Curva de Bézier que puede definir una animación arbitraria. Ver generador de curvas de Bézier. |
Valor por defecto: ease.
Comparación de diferentes valores
Pasa el mouse sobre los bloques que se presentan a continuación, para ver el funcionamiento de todos los tipos de funciones de tiempo:
Véase también
-
la propiedad
animation,
que es una propiedad abreviada para animaciones -
la regla
@keyframes,
que define los fotogramas clave de la animación -
las transiciones suaves
transition, que representan una animación al pasar el cursor sobre un elemento
