CSS propiedad de función de tiempo de transición
Ejemplo
Un efecto de transición con la misma velocidad de principio a fin:
div {
transition-timing-function: linear;
}
Definición y uso
La transition-timing-functionpropiedad especifica la curva de velocidad del efecto de transición.
Esta propiedad permite que un efecto de transición cambie de velocidad a lo largo de su duración.
| Valor por defecto: | facilidad |
|---|---|
| Heredado: | No |
| Animable: | No. Leer sobre animable |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | objeto .style.transitionTimingFunction="lineal" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.
| Property | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Sintaxis 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 de propiedad
| Value | Description |
|---|---|
| ease | Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) |
| linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) |
| ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) |
| ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) |
| ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) |
| step-start | Equivalent to steps(1, start) |
| step-end | Equivalent to steps(1, end) |
| steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Consejo: ¡Pruebe los diferentes valores en los ejemplos a continuación para entender cómo funciona!
Más ejemplos
Ejemplo
Para comprender mejor los diferentes valores de función: aquí hay cinco elementos div diferentes con cinco valores diferentes:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Ejemplo
Igual que el ejemplo anterior, pero las curvas de velocidad se especifican con la función cubic-bezier:
#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
páginas relacionadas
Tutorial CSS: Transiciones CSS
Referencia HTML DOM: propiedad TransitionTimingFunction