0 FPS
Propiedad CSS : transition-timing-function
La web está en segundo plano, animación en pausa.
Cargando animación...
Esta propiedad nos permite definir que tipo de curva de velocidad usara la transición. Para entenderlo mejor vamos a imaginar una animación que mueve 10 píxeles un objeto durante 10 segundos, una curva "linear" moveria 1 pixel en cada segndo, pero por ejemplo si usamos "ease-in" los primeros segundos se movera mas lenta, y luego continuara de forma normal.
Sintaxis
transition-timing-function: Valor;
| linear | La transición tiene la misma velocidad en todo momento. | cubic-bezier(1, 1, 1, 1) |
| ease | La transición empieza lenta, luego va rápida, y temina aun más lenta. (Por defecto) | cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | La transición empieza lenta. | cubic-bezier(0.42, 0, 1, 1) |
| ease-out | La transición termina lenta. | cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | La transición empieza y termina lenta. | cubic-bezier(0.42, 0, 0.58, 1) |
| cubic-bezier(d,d,d,d) | Define tu propia curva de velocidad, los valores posibles son de 0 a 1. |
Código de ejemplo
Compatibilidad
Esta propiedad es soportada por todos los navegadores compatibles con CSS3.
| Soportado a partir de la versión 26 | |
| Soportado a partir de la versión 16 | |
| Soportado a partir de la versión 12.1 | |
Soportado a partir de la versión 3 con el prefijo -webkit- | |
| Soportado a partir de la versión 10 |
Documento modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020