• —Son efectos que permiten a un elemento cambiar de un estilo a otro progresivamente.
  • —Para ello:
    • —Especificar la propiedad o propiedades CSS a la que se desea agregar un efecto.
    • —Especificar la duración del efecto.

       

Propiedades de la transición

Propiedad Descripción
transition Propiedad resumida que combina las 4 propiedades
transition-property Especifica el nombre de la propiedad CSS al que se aplica la transición
transition-duration El tiempo empleado en desarrollarse la transición.
transition-timing-function Cómo se desarrolla la transición en el tiempo
transition-delay Retraso en iniciarse la transición.

 

Ejemplo​Ejemplo

Pasa el ratón por la caja verde:


 
  1. .caja1 {
  2. background-color: #090;
  3. height: 100px;
  4. width: 100px;
  5. transition:width 2s;
  6. }
  7.  
  8. .caja1:hover
  9. {
  10. width:300px;
  11. }