Propiedad de transición CSS
Ejemplo
Pase el cursor sobre un elemento <div> para cambiar gradualmente el ancho de 100 px a 300 px:
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La transition
propiedad es una propiedad abreviada para:
- propiedad de transición
- duración de la transición
- función de temporización de transición
- transición-retraso
Nota: Siempre especifique la propiedad de duración de la transición ; de lo contrario, la duración es 0 y la transición no tendrá efecto.
Valor por defecto: | todo 0s facilidad 0s |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.transition="todos los 2" |
Compatibilidad con 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 de -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.
Property | |||||
---|---|---|---|---|---|
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
Value | Description |
---|---|
transition-property | Specifies the name of the CSS property the transition effect is for |
transition-duration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transition-timing-function | Specifies the speed curve of the transition effect |
transition-delay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Cuando se enfoca un <input type="text">, cambia gradualmente el ancho de 100px a 250px:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
páginas relacionadas
Tutorial CSS: Transiciones CSS
Referencia HTML DOM: propiedad de transición