Búsqueda personalizada
 
 
 
 
Transiciones (tiempo de demora en iniciar la transición)
   

El cuarto parmetro opcional de la propiedad transition es indicar un tiempo de espera hasta que se inicie la transicin:

Elemento {
      transition: [nombre de propiedad] [duracin de la transicin] 
                  [funcin de transicin] [tiempo de inicio];
}

Es decir indicamos la cantidad de milisegundos o segundos hasta que se inicia el proceso de transicin.

Por ejemplo si queremos que la transicin comience en 1 segundo la sintaxis ser la siguiente:

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

Puede ser muy til si queremos encadenar transiciones, por ejemplo si queremos que el elemento modifique su ancho y luego al finalizar el cambio del ancho modifique su color:

#recuadro2{
  margin:5px;
  border-radius: 20px;  
  background-color:#eee;
  width:200px;
  padding:10px;
  transition:width 1s ease,
             background-color 1s ease 1s;
  -moz-transition:width 1s ease,
           background-color 1s ease 1s;
  -ms-transition:width 1s ease,
           background-color 1s ease 1s;
  -webkit-transition:width 1s ease,
           background-color 1s ease 1s;
  -o-transition:width 1s ease,
           background-color 1s ease 1s;
}

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

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion