Las transiciones en css3 permiten modificar el valor de una propiedad de un elemento HTML en forma gradual durante un tiempo determinado de un estado inicial a un estado final.
La sintaxis más simple para definir una transición de una propiedad es:
Elemento {
transition: [nombre de propiedad] [duración de la transición] ;
}
Por ejemplo crearemos dos recuadro y cuando pasemos la flecha del mouse sobre el mismo cambiaremos su tamaño. El primer recuadro lo haremos sin transición:
#recuadro1{
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
#recuadro1:hover{
width:300px;
}
Cuando probamos la página veremos que el recuadro1 cambia el ancho del recuadro de 200 píxeles a 300 píxeles en forma instantanea al pasar la flecha del mouse.
Ahora si definimos la propiedad transition indicando que actúe sobre la propiedad width y que el cambio lo realice en 1 segundo:
#recuadro2{
border-radius: 20px;
background-color:#ff0;
width:200px;
padding:10px;
transition:width 1s;
-moz-transition:width 1s;
-ms-transition:width 1s;
-webkit-transition:width 1s;
-o-transition:width 1s;
}
#recuadro2:hover{
width:300px;
}
Luego tenemos la siguiente sintaxis:
transition:width 1s;
Como vemos indicamos que la transición afecta a la propiedad width y que el cambio se realice en 1 segundo. Debemos agregar la propiedad con cada prefijo de navegador hasta que se estabilice su uso.