Conociendo sobre los efectos de transiciones CSS3

Las transiciones CSS proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

Para aplicar una transición a un elemento tenemos que utilizar la propiedad transition. Aunque está propiedad ya la podemos considerar un estándar, es recomendable el uso de prefijos para que funcione en versiones antiguas de los navegadores. Antes de comenzar, explicaremos brevemenete los navegadores que sorportan este efecto actualmente

Propiedad
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

Como usar las transiciones de CSS3

Para crear un efecto de transición de CSS3 debes especificar dos cosas

• La propiedad CSS
• La duración de efecto

Nota: Si no agregas la duración, el efecto no tendrá lugar ya que el valor por defecto es 0

Ejemplo:

Tenemos un pequeño div color rojo cuyo tamaño original es 100px y al poner el mouse sobre el, el evento hover amplia su propiedad width a 300px

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
   -o-transition: width 2s; /* Opera */
   -moz-transition: width 2s; /* Mozilla */
   -webkit-transition: width 2s; /* Safari y Chrome */
}
#box:hover {
    width: 300px;
}

Usar una sola propiedad no es limitante, por lo que en el siguiente ejemplo, se puede observar como se aplica dos efectos por separado a un mismo div.

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
   -o-transition: width 2s, height 4s; /* Opera */
   -moz-transition: width 2s, height 4s; /* Mozilla */
   -webkit-transition: width 2s, height 4s; /* Safari y Chrome */
}
#box:hover {
    width: 300px;
    height:300px;
}

Curva de Transición

Además de la propiedad y la duración, podemos añadir la curva que tendrá la transición al momento de hacer el efecto, para esto contamos con la propiedad transition-timing-function

Dicha propiedad cuenta con los siguientes valores:

• ease - Transición lenta al inicio, un poco mas rápido a mediados de la misma, y finaliza con lentitud

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width ease 2s;
   -o-transition: width ease 2s; /* Opera */
   -moz-transition: width ease 2s; /* Mozilla */
   -webkit-transition: width ease 2s;
    
}
#box:hover {
    width: 300px;
}

• linear - Transición con efecto unifome

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width linear 2s;
   -o-transition: width linear 2s; /* Opera */
   -moz-transition: width linear 2s; /* Mozilla */
   -webkit-transition: width linear 2s;
    
}
#box:hover {
    width: 300px;
}

• ease-in - Transición lenta solo al inicio 

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width ease-in 2s;
   -o-transition: width ease-in 2s; /* Opera */
   -moz-transition: width ease-in 2s; /* Mozilla */
   -webkit-transition: width ease-in 2s;
    
}
#box:hover {
    width: 300px;
}

• ease-out - Transición lenta solo al final 

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width ease-out 2s;
   -o-transition: width ease-out 2s; /* Opera */
   -moz-transition: width ease-out 2s; /* Mozilla */
   -webkit-transition: width ease-out 2s;
    
}
#box:hover {
    width: 300px;
}

• ease-in-out - Transición con inicio y final lento 

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width ease-in-out 2s;
   -o-transition: width ease-in-out 2s; /* Opera */
   -moz-transition: width ease-in-out 2s; /* Mozilla */
   -webkit-transition: width ease-in-out 2s;
    
}
#box:hover {
    width: 300px;
}

• cubic-bezier(n,n,n,n) - El usuario define los valores de la curva

Transición + Transformación (transition + tranform)

#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s, height 2s, transform 2s;
   -o-transition: width 2s, height 2s, -o-transform 2s; /* Opera */
   -moz-transition: width 2s, height 2s, -moz-transform 2s; /* Mozilla */
   -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari y Chorme */
    
}
#box:hover {
    width: 300px;
    height: 300px;
    -o-transform: rotate(180deg); /* Opera */
    -moz-transform: rotate(180deg); /* Safari y Chrome */
    -webkit-transform: rotate(180deg); /* Safari y Chrome */
    transform: rotate(180deg);
}

Dar un útil uso de estas transiciones que nos otorga CSS3 depende de ti, esto es tan solo un preámbulo para obtener conocimientos de como usar la misma, pero tu creatividad te puede llevar al limite de lo imposible.

Ref: w3School.com