Transiciones:

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:

#transiciones1{ 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; } #transiciones1:hover{ width:300px; } Si queremos luego modificar más de una propiedad debemos indicarlos separando por coma: #transiciones2{ 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; } #transiciones2: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".