Atributo Style transition

Definición y uso

transition El atributo es una abreviatura de los cuatro atributos de transición:

Notas:Siempre especifique Atributo transitionDurationde lo contrario, el tiempo de duración será 0 y la transición no será válida.

Véase también:

Manual de referencia de CSS:Atributo transition

Ejemplo

Coloque el ratón sobre el elemento div para cambiar gradualmente su apariencia:

document.getElementById("myDIV").style.transition = "all 2s";

Intente usted mismo

Sintaxis

Retornar el atributo transition:

object.style.transition

Establecer el atributo transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

Valor del atributo

Valor Descripción
transitionProperty Especifica el nombre del atributo CSS al que se aplica el efecto de transición.
transitionDuration Especifica cuántos segundos o milisegundos necesita el efecto de transición para completarse.
transitionTimingFunction Especifica la curva de velocidad del efecto de transición.
transitionDelay Define cuándo comienza el efecto de transición.
initial Establece este atributo en su valor predeterminado. Véase initial.
inherit Hereda este atributo de su elemento padre. Véase inherit.

Detalles técnicos

Valor predeterminado: all 0 ease 0
Valor de retorno: cadena, que representa el Atributo transition.
Versión de CSS: CSS3

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1