Ejemplo
Pase el ratón sobre un <div> elemento, y cambiar el ancho con un efecto de transición suave:
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad de transición de propiedad especifica el nombre de la propiedad CSS el efecto de transición es para (the transition effect will start when the specified CSS property changes) .
Tip: Un efecto de transición normalmente podría ocurrir cuando un usuario vuelo estacionario sobre un elemento.
Note: Siempre especifique la propiedad de transición de duración, de lo contrario la duración es 0, y la transición no tendrá ningún efecto.
| Valor por defecto: | all |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.transitionProperty="width,height" 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 | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
sintaxis CSS
transition-property: none|all|property|initial|inherit;Valores de propiedad
| Valor | Descripción |
|---|---|
| none | Ninguna propiedad obtendrá un efecto de transición |
| all | Valor por defecto. Todas las propiedades tendrán un efecto de transición |
| property | Define una lista separada por comas de nombres de propiedades de CSS es el efecto de transición para |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Pase el ratón sobre un <div> elemento, y cambiar la anchura y la altura con un efecto de transición suave:
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS3 Transitions
Referencia HTML DOM: transitionProperty property