NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Propiedad CSS : animation-timing-function

30 de Diciembre del 2020 por Josep Antoni Bover. 34 visitas, 0 comentarios, 0 votos
Categorías : CSS.
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

Enlaces relacionados