Propiedad de transición de estilo
Ejemplo
Pase el cursor sobre un elemento div para cambiar gradualmente su apariencia:
document.getElementById("myDIV").style.transition = "all 2s";
Definición y uso
La propiedad de transición es una propiedad abreviada para las cuatro propiedades de transición:
TransitionProperty, TransitionDuration, TransitionTimingFunction y TransitionDelay.
Nota: especifique siempre la propiedad TransitionDuration; de lo contrario, la duración es 0 y la transición no tendrá efecto.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
Sintaxis
Devuelve la propiedad de transición:
object.style.transition
Establezca la propiedad de transición:
object.style.transition = "property duration timing-function delay|initial|inherit"
Valores de propiedad
Value | Description |
---|---|
transitionProperty | Specifies the name of the CSS property the transition effect is for |
transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transitionTimingFunction | Specifies the speed curve of the transition effect |
transitionDelay | 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 |
Detalles técnicos
Valor por defecto: | todo 0 facilidad 0 |
---|---|
Valor devuelto: | Una cadena, que representa la propiedad de transición de un elemento. |
Versión CSS | CSS3 |
páginas relacionadas
Referencia CSS: propiedad de transición
❮ Objeto de estilo