CSS transition atributo

Definición y uso

El atributo de transición es un atributo abreviado que se utiliza para configurar cuatro propiedades de transición:

Notas:Siempre configure transition-duration Si no se establece la propiedad, no se generará el efecto de transición, a menos que el tiempo sea 0.

Véase también:

Tutorial de CSS:CSS transición

Manual de referencia de HTML DOM:Atributo de transición

Ejemplo

Coloca el puntero del ratón sobre el elemento div, y su ancho cambiará gradualmente de 100px a 300px:

div {
  ancho: 100px;
  transition: ancho 2s;
}

Prueba personalmente

Sintaxis de CSS

transition: property duration timing-function delay;

Valor de atributo

Valor Descripción
transition-property Establece el nombre de las propiedades CSS que se deben establecer para el efecto de transición.
transition-duration Establece cuántos segundos o milisegundos se necesita para completar el efecto de transición.
transition-timing-function Establece la curva de velocidad del efecto de velocidad.
transition-delay Define cuándo comienza el efecto de transición.

Detalles técnicos

Valor predeterminado: todos 0 suavidad 0
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: objeto.style.transition="ancho 2s"

Compatibilidad del navegador

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

Los números con -webkit-, -moz- o -o- indican la primera versión de uso con prefijo.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-