CSS3 propiedad-tiempo-función de animación
Ejemplos
De principio a fin a la misma velocidad reproducir la animación:
-webkit-animation-timing-function:linear; /* Safari and Chrome */
Trate »
En la parte inferior de esta página para más ejemplos.
Soporte para el navegador
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
definiciones de código e instrucciones
Cómo Especifica la animación-tiempo-función de la animación completar un ciclo.
Velocidad Películas curva de definición a partir de una hoja de estilo CSS en otro período de tiempo determinado.
curva de velocidad se utiliza para cambiar más suave.
| Por defecto: | facilidad |
|---|---|
| herencia: | no |
| Version: | CSS3 |
| la sintaxis de JavaScript: | objetar object.style.animationTimingFunction = "lineal" |
gramática
Funciones matemática-tiempo-función de animación utilización, llamada la curva cúbica de Bézier, la curva de velocidad. Con esta función, puede utilizar sus propios valores, o utilizar uno de los valores predefinidos:
| valor | descripción | prueba |
|---|---|---|
| lineal | Animación de principio a fin a la misma velocidad. | prueba |
| facilidad | Predeterminado. Anime comenzó a baja velocidad, a continuación, acelerar, ralentizar al final. | prueba |
| facilidad en | Animación comienza a baja velocidad. | prueba |
| facilidad a cabo | Animación en el extremo bajo. | prueba |
| la facilidad de entrada-salida | Animación de inicio y fin a baja velocidad. | prueba |
| cúbico-Bezier (n, n,n, n) | En la función cúbica bezier en sus propios valores. Los valores posibles son de 0-1 valores. |
Consejo: Trate la siguiente función de "probar" utilice un valor diferente.
ejemplos en línea
Ejemplos
Para comprender mejor los diferentes valores de la función de temporización, se proporciona un conjunto de cinco valores diferentes de cinco diferentes elementos div:
#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;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#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;}
Trate »
Ejemplos
Lo mismo que el ejemplo anterior, pero se define por la función cúbica-Bezier curva de velocidad:
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#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);}
Trate »
Artículos relacionados
CSS3 tutorial: Animación CSS3