Transiciones de múltiples propiedades (transition)

También podemos hacer transiciones de múltiples propiedades, para ello indicamos cada transición separada por coma:

Elemento {
      transition: [nombre de propiedad] [duración de la transición],
                  [nombre de propiedad] [duración de la transición],
                  [nombre de propiedad] [duración de la transición] ;
}

Por ejemplo si queremos que el recuadro modifique su ancho y cambie de color luego debemos codificar lo siguiente:

#recuadro1{
  border-radius: 20px;  
  background-color:#ff0;
  width:200px;
  padding:10px;
  transition:width 1s,
             background-color 8s;
  -moz-transition:width 1s,
                 background-color 8s;
  -ms-transition:width 1s,
                 background-color 8s;
  -webkit-transition:width 1s,
                     background-color 8s;
  -o-transition:width 1s,
                background-color 8s;
}

#recuadro1:hover{
  width:300px;
  background-color: #f00;
}

Como vemos en la propiedad transition indicamos la propiedad width con una duración de un segundo y la propiedad background-color con un valor de 8 segundos. Esto significa que cuando dispongamos la flecha del mouse dentro del div se lanzarán ambas transiciones que tienen duraciones distintas (cambiará de 200 píxeles a 300 píxeles en el lapso de un segundo y también cambiará del color amarillo al rojo en forma gradual en un lapso de 8 segundos)


Retornar