Ejemplo
Cambiar la curva de velocidad de un efecto de transición:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
Inténtalo tú mismo " Definición y Uso
La propiedad transitionTimingFunction especifica la curva de velocidad del efecto de transición.
Esta propiedad permite un efecto de transición para cambiar la velocidad sobre su duración.
Soporte del navegador
La propiedad transitionTimingFunction es compatible en Internet Explorer 10, Firefox, Opera y Chrome.
Safari soporta una alternativa, la propiedad WebkitTransitionTimingFunction.
Nota: La propiedad transitionTimingFunction no es compatible con Internet Explorer 9 y versiones anteriores.
Sintaxis
Devolver la propiedad transitionTimingFunction:
object .style.transitionTimingFunction Establecer la propiedad transitionTimingFunction:
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
Valores de propiedad
| Valor | Descripción |
|---|---|
| ease | Valor por defecto. Especifica un efecto de transición con un comienzo lento, luego rápido, y luego terminar lentamente (equivalent to cubic- bezier(0.25,0.1,0.25,1) ) |
| linear | Especifica un efecto de transición con la misma velocidad de principio a fin (equivalent to cubic- bezier(0,0,1,1) ) |
| ease-in | Especifica un efecto de transición con un comienzo lento (equivalente a cubic- bezier(0.42,0,1,1) ) |
| ease-out | Especifica un efecto de transición con un extremo lento (equivalente a cubic- bezier(0,0,0.58,1) ) |
| ease-in-out | Especifica un efecto de transición con un lento inicio y el final (equivalente a cubic- bezier(0.42,0,0.58,1) ) |
| cubic- bezier( n , n , n , n ) | Definir sus propios valores de la función cúbica-Bezier. Los valores posibles son los valores numéricos de 0 a 1 |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lea acerca de heredar |
Detalles técnicos
| Valor por defecto: | facilitar |
|---|---|
| Valor de retorno: | Una cadena, que representa la propiedad-timing-función de transición de un elemento |
| Versión CSS | CSS3 |
Páginas relacionadas
Referencia CSS: transition-timing-function property
<Estilo de objeto