Transiciones con CSS3: Transition

¿De que se trata se tratan la propiedad Transition en CSS3?, bueno esto es una pregunta de lo más simple, esta nueva implementación para CSS que de momento funciona en todos los navegadores salvo Internet Explorer, una de las razones por las que debemos de dejar de usarlo, es una propiedad que hace una transición entre dos reglas, una de ellas una pseudo-clase como :hover, :active y :focus

Podemos ver tres ejemplos con tres atributos CSS estándar (Pongan el cursor encima):

Aplicado a Background

Aplicado a Width

Aplicado a Padding

El resultado es increíble y las posibilidades extensas.

Cuenta con varias propiedades:

• transition-property especifica a que propiedad CSS se le aplica
• transition-duration Define el tiempo de transición que va a tomar en segundos por ejemplo .1s (1/10 de segundo), 2s (2 sedundos), .5s (1/2 de segundo).
• transition-timing-function define la forma en que se calculará la transición, por defecto "ease"
• transition-delay Define el tiempo de retraso para que inicie la transición.

Como en todas las reglas CSS con varias propiedades puede resumirse dentro de una misma línea solamente usando

transition: "propiedad" "retraso de transición" "función" "tiempo de transición";

Un ejemplo simple como el que sirvió para hacer las transiciones de arriba sobre background-color

transition: background-color .5s;

Esto solamente se resume a propiedad y tiempo de transición, como se usa, el caso en específico crearemos dos reglas CSS que aplicaremos con class o id

La primera es a donde se aplica la propiedad transition, la segunda es la seudo clase, para este caso :hover, a pesar de que funciona en la mayoría de los navegadores (Salvo Internet Explorer que no funciona), estos requieren el prefijo "-moz-", "-webkit-" y "-o-" para Mozilla, Safari, Opera y Chrome.

.transition1
{
background:#F19A00;
-webkit-transition: background-color .5s;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
}
.transition1:hover
{
background:#fff;}

Como ven hemos aplicado la misma regla transition para cada motor de navegador el primer background sera el color por defecto y el segundo a donde aplicamos :hover a lado de la regla como si se tratara de la etiqueta A para vínculos (a:hover), que al poner el cursor encima se inicia la transición. podemos cambiar background-color con cualquier otra propiedad css poniendo dos valores uno para la regla normal y otro para :hover.

Ahora resta aplicarlo a una div con class (Si usan las reglas CSS de este ejemplo recuerden usar padding y width para el ancho del cuadro porque yo he simplificado el CSS a su mínima expresión):

<div class="transition1">
Aplicado a Background
</div>