NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Propiedad CSS : transition-timing-function

30 de Diciembre del 2020 por Josep Antoni Bover. 32 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 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

Enlaces relacionados