propiedad transición CSS3
Ejemplos
Pase el ratón sobre un elemento div, y cambiar gradualmente la anchura de la tabla de 100px a 300px ::
div
{
Anchura: 100px;
transición: 2s ancho;
-webkit-transición: 2s ancho; / * Safari * /
}
div: hover {width: 300px;}
{
Anchura: 100px;
transición: 2s ancho;
-webkit-transición: 2s ancho; / * Safari * /
}
div: hover {width: 300px;}
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 | 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 de transición es una propiedad resumida tiene cuatro atributos: la transición de la propiedad, la transición de duración, tiempo de transición de funciones, y la transición de retardo.
Nota: Siempre especifique la propiedad de transición de duración, de lo contrario la duración de 0, la transición no tendrá ningún efecto.
Por defecto: | toda facilidad 0 0 |
---|---|
herencia: | no |
Version: | CSS3 |
la sintaxis de JavaScript: | objeto .style.transition = "anchura" 2s |
gramática
transición: la propiedad de retardo de tiempo de duración de funciones;
值 | 描述 |
---|---|
transition-property | 指定CSS属性的name,transition效果 |
transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |