Transiciones (otra sintaxis para hacer lo mismo)

Hemos visto que la propiedad transition podemos indicarle hasta cuatro parámetros. Los dos primeros son obligatorios y los otros son opcionales.

CSS3 dispone de otras cuatro funciones para indicar cada uno de estos valores en forma independiente:

Elemento {
      transition-property: [nombre de propiedad];
      transition-duration: [duración de la transición];
      transition-timing-function: [función de transición];
      transition-delay: [tiempo de inicio];
}

Por ejemplo si queremos modificar el ancho de un elemento cuando disponemos la flecha del mouse y que dure 1 segundo y se lance luego de medio segundo la sintaxis es la siguiente:

#recuadro1{
  margin:5px;
  border-radius: 20px;  
  background-color:#eee;
  width:200px;
  padding:10px;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 0.5s;
  -moz-transition-property: width;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -moz-transition-delay: 0.5s;
  -ms-transition-property: width;
  -ms-transition-duration: 1s;
  -ms-transition-timing-function: linear;
  -ms-transition-delay: 0.5s;
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  -webkit-transition-delay: 0.5s;
  -o-transition-property: width;
  -o-transition-duration: 1s;
  -o-transition-timing-function: linear;
  -o-transition-delay: 0.5s;
}

#recuadro1:hover{
  width:300px;
}

Si queremos luego modificar más de una propiedad debemos indicarlos separando por coma:

#recuadro2{
  margin:5px;
  border-radius: 20px;  
  background-color:#eee;
  width:200px;
  padding:10px;
  transition-property: width, background-color;
  transition-duration: 1s, 1s;
  transition-timing-function: linear, linear;
  transition-delay: 0s, 1s;
  -moz-transition-property: width, background-color;
  -moz-transition-duration: 1s, 1s;
  -moz-transition-timing-function: linear, linear;
  -moz-transition-delay: 0s, 1s;
  -ms-transition-property: width, background-color;
  -ms-transition-duration: 1s, 1s;
  -ms-transition-timing-function: linear, linear;
  -ms-transition-delay: 0s, 1s;
  -webkit-transition-property: width, background-color;
  -webkit-transition-duration: 1s, 1s;
  -webkit-transition-timing-function: linear, linear;
  -webkit-transition-delay: 0s, 1s;
  -o-transition-property: width, background-color;
  -o-transition-duration: 1s, 1s;
  -o-transition-timing-function: linear, linear;
  -o-transition-delay: 0s, 1s;
}

#recuadro2:hover{
  width:300px;
  background-color:#ff0;
}

Es importante el orden de las propiedades definidas en "transition-property", en este ejemplo definimos los valores "width y background-color", luego por ejemplo en la propiedad "transition-delay" el valor de cero segundos se aplica a la propiedad width y el de 1 segundo a la propiedad "background-color".


Retornar