Ejemplo
Reproducir una animación con la misma velocidad de principio a fin:
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El-tiempo-función de animación especifica la curva de velocidad de una animación.
La curva de velocidad define el tiempo de una animación utiliza para pasar de un conjunto de estilos CSS a otro.
La curva de velocidad se utiliza para hacer los cambios sin problemas.
| Valor por defecto: | ease |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.animationTimingFunction="linear" Try it |
Soporte para el 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 por -webkit-, -moz-, o -O- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| 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; El-tiempo-función de animación utiliza una función matemática, llamada la curva Bezier cúbica, para hacer que la curva de velocidad. Puede utilizar sus propios valores en esta función, o utilizar uno de los valores predefinidos:
Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| linear | La animación tiene la misma velocidad de principio a fin | Juegalo " |
| ease | Valor por defecto. La animación tiene un comienzo lento, luego rápido, antes de que termine lentamente | Juegalo " |
| ease-in | La animación tiene un comienzo lento | Juegalo " |
| ease-out | La animación tiene un extremo lenta | Juegalo " |
| ease-in-out | La animación tiene tanto un comienzo lento y un extremo lenta | Juegalo " |
| step-start | Equivalente a steps(1, start) | |
| step-end | Equivalente a steps(1, end) | |
| steps(int,start|end) | 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. Tiene que ser un número entero positivo (greater than 0) . El segundo parámetro, que es opcional, es el valor "start" o "end" , y especifica el punto en el que se produce el cambio de los valores dentro del intervalo. Si se omite el segundo parámetro, se le da el valor "end" | |
| 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. Lee sobre heredar |
Tip: Trate de los diferentes valores de la sección Inténtelo usted mismo a continuación.
Más ejemplos
Ejemplo
Para comprender mejor los diferentes valores de la función de temporización;
Aquí hay cinco diferentes <div> elementos con cinco valores diferentes:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard
syntax */
#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;}
Inténtalo tú mismo " Ejemplo
Igual que el ejemplo anterior, pero las curvas de velocidad se definen con la función cúbica-Bezier:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#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);} Inténtalo tú mismo " Páginas relacionadas
CSS3 tutorial: CSS3 Animaciones
Referencia HTML DOM: animationTimingFunction property