Propiedad CSS animation-timing-function
Ejemplo
Reproduce una animación con la misma velocidad de principio a fin:
div {
animation-timing-function: linear;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
especifica la animation-timing-functioncurva de velocidad de una animación.
La curva de velocidad define el TIEMPO que usa una animación para cambiar de un conjunto de estilos CSS a otro.
La curva de velocidad se usa para hacer los cambios suavemente.
| Valor por defecto: | facilidad |
|---|---|
| Heredado: | No |
| Animable: | No. Leer sobre animable |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | objeto .style.animationTimingFunction="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 | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Sintaxis CSS
animation-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;
La función de tiempo de animación utiliza una función matemática, llamada curva de Bézier cúbica, para hacer la curva de velocidad. Puede usar sus propios valores en esta función o usar uno de los valores predefinidos:
Valores de propiedad
| Value | Description | Play it |
|---|---|---|
| linear | The animation has the same speed from start to end | |
| ease | Default value. The animation has a slow start, then fast, before it ends slowly | |
| ease-in | The animation has a slow start | |
| ease-out | The animation has a slow end | |
| ease-in-out | The animation has both a slow start and a slow end | |
| 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 |
Sugerencia: Pruebe los diferentes valores en la sección "Más ejemplos" a continuación.
Más ejemplos
Ejemplo
Para comprender mejor los diferentes valores de la función de temporización;
Aquí hay cinco elementos <div> diferentes con cinco valores diferentes:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Ejemplo
Igual que el ejemplo anterior, pero las curvas de velocidad se definen con la función cubic-bezier:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
páginas relacionadas
Tutorial CSS: Animaciones CSS
Referencia HTML DOM: propiedad animationTimingFunction