Ejemplo
Pase el ratón sobre un <div> elemento para cambiar gradualmente la anchura de 100px a 300px:
div
{
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
}
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 es una propiedad resumida para las cuatro propiedades de transición:
transición de la propiedad, la transición de la duración, el tiempo de transición de funciones, y la transición de retardo.
Note: Siempre especifique la propiedad de transición de duración, de lo contrario la duración es de 0s, y la transición no tendrá ningún efecto.
| Valor por defecto: | all 0s ease 0s |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.transition="all 2s" 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 | 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 duration timing-function delay|initial|inherit;Valores de propiedad
| Valor | Descripción |
|---|---|
| transition-property | Especifica el nombre de la propiedad CSS es el efecto de transición para |
| transition-duration | Especifica cuántos segundos o milisegundos el efecto de transición necesario para completar |
| transition-timing-function | Especifica la curva de velocidad del efecto de transición |
| transition-delay | Define cuando el efecto de transición se iniciará |
| 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
Cuando un <input type="text"> obtiene el foco, cambiar gradualmente la anchura de 100px a 250px:
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
} Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS3 Transitions
Referencia HTML DOM: transition property