0 FPS
Propiedad CSS : animation-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 animació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
animation-timing-function: Valor;
linear | La animación tiene la misma velocidad en todo momento. | cubic-bezier(1, 1, 1, 1) |
ease | La animació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 animación empieza lenta. | cubic-bezier(0.42, 0, 1, 1) |
ease-out | La animación termina lenta. | cubic-bezier(0, 0, 0.58, 1) |
ease-in-out | La animació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 2 con el prefijo -webkit- | |
Soportado a partir de la versión 16 | |
Soportado a partir de la versión 15 con el prefijo -webkit- | |
Soportado a partir de la versión 4 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