CSS3 propiedad-tiempo-función de transición
Ejemplos
Las transiciones a la misma velocidad de principio a fin:
-webkit-transition-timing-function: linear; /* Safari and Chrome */
Trate »
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión de la propiedad.
Inmediatamente después de la -webkit- digital, -MS- o hace -moz- en apoyo del prefijo atribuyen primer número de la versión del navegador.
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
Definiciones de atributos e instrucciones
propiedad-tiempo-función de transición especifica una velocidad de efecto de transición.
Esta propiedad permite un efecto de transición para cambiar la velocidad de su duración.
| Por defecto: | facilidad |
|---|---|
| herencia: | no |
| Version: | CSS3 |
| la sintaxis de JavaScript: | objetar .style.transitionTimingFunction = "lineal" |
gramática
| valor | descripción |
|---|---|
| lineal | Abastecimiento con la misma velocidad para iniciar los extremos efecto de transición (igual cúbicas Bézier (0,0,1,1)). |
| facilidad | Provisión lento comienzo, luego más rápido, luego lento extremo efectos de transición (cúbicas Bézier (0.25,0.1,0.25,1)). |
| facilidad en | Disposiciones transitorias en el sentido de un comienzo lento (igual a la cúbicas Bézier (0.42,0,1,1)). |
| facilidad a cabo | Disposiciones a la final de los efectos de transición lenta (equivalente cúbicas Bézier (0,0,0.58,1)). |
| la facilidad de entrada-salida | Disposiciones transitorias en efecto comienza lento y extremos (igual cúbicas Bézier (0.42,0,0.58,1)). |
| cúbico-Bezier (n, n,n, n) | A definir sus propios valores en la función cúbicas Bézier. valor posible es un número entre 0-1. |
Consejo: Trate los diferentes valores en los siguientes ejemplos para entender cómo funciona!
más ejemplos
Ejemplos
Para entender mejor la función de los diferentes valores: Hay cinco elementos div diferentes, con cinco valores diferentes:
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
Trate »
Ejemplos
Y el ejemplo anterior, sino que especifica la curva de velocidad función de curva cúbica:
#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);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Trate »