El cuarto parámetro opcional de la propiedad transition es indicar un tiempo de espera hasta que se inicie la transición:
Elemento {
transition: [nombre de propiedad] [duración de la transición]
[función de transición] [tiempo de inicio];
}
Es decir indicamos la cantidad de milisegundos o segundos hasta que se inicia el proceso de transición.
Por ejemplo si queremos que la transición 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;
}