Propiedad transition

La propiedad transition es una abreviatura para transiciones suaves, permite establecer simultáneamente transition-duration, transition-property, transition-timing-function y transition-delay.

Sintaxis

cssselector {
  transition: valor;
}

El orden de las propiedades no importa, sin embargo el tiempo de duración (transition-duration) debe colocarse antes del retraso (transition-delay).

Valores

Consulte las propiedades correspondientes. Valor por defecto: all 0s ease 0s.

El valor none cancela todas las transiciones (ocurrirán instantáneamente).

Ejemplo

Pase el cursor del ratón sobre el bloque - durante 3 segundos no pasará nada (hay un retraso de 3s), y luego cambiará suavemente su ancho en 2 segundos. Si luego quita el cursor - de nuevo durante 3 segundos no pasará nada, y luego el ancho se reducirá suavemente al valor original:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Véase también