CSS3, Animaciones I

abril 8, 2014

Por gPuon

CSS3 Transition

La propiedad Transition de CSS3 nos permite lograr animaciones aplicando todo nuestro conocimiento de las propiedades básicas como son dimensiones, posiciones, colores, etc. Por lo que para sacar mayor provecho es importante tener bien claros los conceptos básicos del CSS.

Una transición es el paso de un estado a otro.

Aplicando este concepto a nuestras hojas de estilo recordaremos que usando el pseudo elemento hover podemos hacer pasar un elemento de un estado a otro; por ejemplo, cambiando el color de fondo de un botón.

.boton {
   width:100px; display:block; padding:20px; margin:auto;
   background:#F63; color:#FFF; text-align:center; }
.boton:hover { background:#000; }

Usando esta misma lógica y la propiedad Transition de CSS3 lograremos tener más control de la transición determinando por ejemplo el tiempo que tarda en pasar de un estado a otro. Veamos el mismo ejemplo aplicando la propiedad  transition: 

.boton {
   width:100px; display:block; padding:20px; margin:auto;
   background:#F63; color:#FFF; text-align:center;
   /* Aqui colocamos la transicion para cada navegador */
   -webkit-transition:all 3s ease-out; /* Chrome y Safari */
   -o-transition:all 3s ease-out; /* Opera */
   -moz-transition:all 3s ease-out; /* Mozilla Firefox */
   -ms-transition:all 3s ease-out; /* Internet Explorer */
   transition:all 3s ease-out; /* W3C */ }
.boton:hover { background:#000; }

Aquí podemos ver el ejemplo en funcionamiento: Transition-01

La propiedad transition funciona aplicada al elemento que queremos animar y cambiando el estado de la misma en el pseudo elemento hover; es decir, primero definimos los colores o el tamaño inicial y los valores de la transición, después definimos el estado final del elemento.

Sintaxis

transition: propiedad | duración | función de temporización | retraso

• Propiedad. La característica o características que queremos cambiar.
• Duración. El tiempo de la transición, se expresa en segundos (2s).
• Función de termporización. Algo así como la forma en que empieza y/o termina la transición (ease, linear, ease-in, ease-out).
• Retraso. El tiempo de espera antes de hacer la transición, se expresa regularmente en segundos (1s).

La implementación de este atributo no es muy compleja y con mucha creatividad y práctica podremos lograr efectos interesantes; un pequeño ejemplo: Transition-02

Consideraciones

Esta propiedad requiere del uso de prefijos para implementarse correctamente en cada navegador, además es importante considerar que solo los navegadores modernos lo ejecutarán. A continuación una tabla con las versiones que lo soportan:

Si tienen dudas o les gustaría que profundizará en algún ejemplo del uso de esta propiedad comenten. Gracias por compartir!!!