Definición de .transition-timing-function en CSS
La propiedad .transition-timing-function, que normalmente se usa como parte de la taquigrafía de transición, se utiliza para definir una función que describe cómo una transición continuará durante su duración, lo que permite que una transición cambie la velocidad durante su curso.
Ejemplo de empleo de la propiedad transition-timing-function
Esta propiedad de CSS normalmente se utiliza de la siguiente manera:
.example {
transition-timing-function: ease-out;
}Otro ejemplo más avanzado de .transition-timing-function es el siguiente de CODEPEN:
Sintaxis de .transition-timing-function en CSS
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;Valores
| Valor | Descripción |
|---|---|
| facilitar | Valor por defecto. Especifica un efecto de transición con un comienzo lento, luego rápido, luego termina lentamente (equivalente a cubic-bezier(0.25,0.1,0.25,1)) |
| lineal | Especifica un efecto de transición con la misma velocidad de principio a fin (equivalente a cubic-bezier(0,0,1,1)) |
| facilidad en | Especifica un efecto de transición con un comienzo lento (equivalente a cubic-bezier(0.42,0,1,1)) |
| Facilitarse | Especifica un efecto de transición con un final lento (equivalente a cubic-bezier(0,0,0.58,1)) |
| facilidad de entrada y salida | Especifica un efecto de transición con un comienzo y un final lentos (equivalente a cubic-bezier(0.42,0,0.58,1)) |
| paso a paso | Equivalente a pasos (1, inicio) |
| paso final | Equivalente a pasos (1, final) |
| pasos(int,inicio|fin) | Especifica una función paso a paso, con dos parámetros. El primer parámetro especifica el número de intervalos en la función. Debe ser un número entero positivo (mayor que 0). El segundo parámetro, que es opcional, es el valor "inicio" o "fin", y especifica el punto en el que se produce el cambio de valores dentro del intervalo. Si se omite el segundo parámetro, se le da el valor "fin" |
| Defina sus propios valores en la función cubic-bezier. Los valores posibles son valores numéricos de 0 a 1 | |
| inicial | Establece esta propiedad en su valor predeterminado. |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .transition-timing-function
Los números de la tabla detallan la primera versión del navegador que es plenamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| unicode-bidi | 2.0 | 5.5 | 1.0 | 1.3 | 9.2 |
Bibliografía
- transition-timing-function on W3C
- transition-timing-function on MDN
- Visualizing transition timings
- cubic-bezier.com by Lea Verou
- CSS cubic Bezier builder by Rob La Placa
- CSS3 Bezier Curve Tester by Michael Gotta
- Ceaser by Matthew Lein
