Transiciones y Transformaciones CSS3 Desde Cero

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Hay ejemplos sorprendentes de transformaciones y transiciones con CSS, pero al mismo tiempo que te van sorprender, ¡es muy posible que te sientas abrumado y un poco intimidado! Este tutorial te guiará a través los aspectos más básicos. Vamos a crear algunos movimientos con transiciones CSS3, paso a paso.

Una Nota Rápida de Soporte del Navegador:

El soporte en por parte navegadores ya es bastante amplio. Firefox 3.5, Chrome, Opera 10.5, Safari 3.1, and Internet Explorer 9.0 no ofrecen problemas en lo que respecta a las transformaciones. IE es un poco menos complaciente con respecto a las transiciones, aunque el soporte está planificado para IE10.

Los Ejes y la Retícula

Para entender el movimiento facilmente vamos a trabajar en una cuadrícula de ejes (la cual reconocerás de matemática básica). Estaremos usando las coordenadas x e y para mover nuestros objetos.

La única diferencia (crucial) es que en nuestro eje, el valor -y está sobre el eje x, aunque normalmente estaría situado por debajo. ¿Por qué? Bueno, HTML y CSS (junto con otras tecnologías web como ActionScript) usan un sistema de coordenadas Cartesianas invertido porque las páginas web empiezan de la esquina superior izquierda y se leen hacia abajo. Así que ahora ya sabes :)

Nota: Voy a asumir que ya eres familiar con la estructura de archicos de HTML y CSS. Voy a omitir explicar cómo configurar el archivo CSS, colocar imágenes y aplicar estilos al eje. Nuestro foco va a estar en animar los objetos. Si no estás seguro de que tus habilidades HTML + CSS habilidades son mejores que cero, echa un vistazo al nuevo tutorial HTML y CSS en 30 días de Tuts + Premium (que es gratis) y podrás aprender todo lo que necesitas saber.

1. Movimiento Horizontal

El primer movimiento demostraremos que es "horizontal"; animaremos el objeto para moverlo a la derecha y después a la izquierda.

Mover hacia la Derecha

Para mover un objeto desde su punto inicial usamos: transform:translate(x,Y);, donde el valor x debería ser positivo y el valor y debería ser 0 para mover el objeto únicamente a la derecha.

HTML

Abre tu Editor de Texto favorito e introduce el siguiente código html, después guarda el archivo.

1	<div id="axis" class="one">
2	<img class="object van move-right" src="images/van-to-right.png"/>
3	</div>

Hemos asignado tres clases a la imagen:

object: Usamos esta clase para establecer reglas generales para todos los objetos que vayamos a usar.
van: Vamos a usar diferentes objetos para demostrar cada una de las animaciones, así que aplicaremos también clases diferentes a las mismas. De esta forma podremos posicionar cada objeto por separado.
move-right: Moveremos el objeto usando esta clase, cada movimiento tendrá una clase diferentes.

CSS

Primero, posicionaremos el objeto (la imagen de nuestra caravana) al centro de la cuadrícula.

.object {
  position: absolute;
}
.van {
	top: 45%;
	left: 44%;
}

En este ejemplo vamos a mover el objeto 350px a la derecha. La sintaxis es transform: translate(350px,0); y el objeto se moverá cuando el puntero se sitúe sobre el Axis. Por lo tanto lo declaramos con: #axis:hover .move-right.

#axis:hover .move-right{
	transform: translate(350px,0);
	-webkit-transform: translate(350px,0); /** Chrome & Safari **/
	-o-transform: translate(350px,0); /** Opera **/
	-moz-transform: translate(350px,0); /** Firefox **/
}

La propiedad CSS transform solo moverá el objeto desde un punto a otro, pero no creará la animación entre los dos puntos. Para conseguirla, necesitamos añadir una propiedad de transición en la clase .object.

.object {
	position: absolute;
	transition: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
	-moz-transition: all 2s ease-in-out; /** Firefox **/
	-o-transition: all 2s ease-in-out; /** Opera **/
}

Esta regla de transición le indicará al navegador que anime all (todas) las propiedades vinculadas al objeto durante 2 seconds mediante la función ease-in-out (tween), sin restraso.

Podemos usar 6 tipos de funciones de transición temporal:

linear: la transición tendrá velocidad constante de principio a fin.
ease: la transición empezará lenta, después acelerará, y volverá a ralentizarse antes de finalizar.
ease-in: la transición empezará lentamente.
ease-out: la transición terminará ralentizándose.
ease-in-out: la transición comienza y finaliza con lentitud.
cubic-bezier: define valores específicos para tu propia transición.

Ver Muestra

Mover hacia la Izquierda

Para mover hacia la izquierda, simplemente necesitamos introducir un valor negativo en la coordenada x, mientras que para la coordenada y mantenemos el valo 0. En este ejemplo moveremos el objeto -360px hacia la izquierda.

HTML

Crea otro archivo HTML e introduce el siguiente código.

1	<div id="axis" class="two">
2	<img class="object van move-left" src="images/van-to-left.png"/>
3	</div>

Esta vez usaremos la clase move-left para establecer la regla css para mover el objeto a la izquierda.

CSS

Después, introduce -360px como coordenada x. transform: translate(-350px, 0); para mover el objeto a la izquierda. ¿Bastante sencillo, no?

#axis:hover .move-left {
	transform: translate(-350px,0);
	-webkit-transform: translate(-350px,0); /** Safari & Chrome **/
	-o-transform: translate(-350px,0); /** Opera **/
	-moz-transform: translate(-350px,0); /** Firefox **/
}

Como hemos establecido con anterioridad la regla de transición en nuestra clase .objeto, no necesitamos indicarla nuevamente.

Ver Muestra

2. Movimiento Vertical

Mover un objeto verticalmente es bastante fácil, casi igual a hacerlo en horizontal. La única diferencia es que usaremos el valor -y para mover el objeto hacia arriba, y el valor y para moverlo hacia abajo.

Mover hacia Arriba

HTML

El código HTML principal es idéntico al de los dos anteriores ejemplos. Pero, reemplazamos el objeto con un cohete (por motivos ilustrativos), y la clase que usaremos para nuestro movimiento hacia arriba es move-up.

1	<div id="axis">
2	<img class="object rocket move-up" src="images/rocket.png"/>
3	</div>

CSS

Igual que con nuestra caravana, ubicaremos el cohete en el centro de la retícula.

1	.rocket {
2	top: 43%;
3	left: 44%;
4	}

Como hemos comentado antes, la coordenada y debería ser negativa, de manera que para que el cohete suba hacia arriba indicaremos un valor de -350px.

#axis:hover .move-up {
	transform: translate(0,-350px);
	-webkit-transform: translate(0,-350px);
	-o-transform: translate(0,-350px); 
	-moz-transform: translate(0,-350px);
}

Ver Muestra

Mover hacia Abajo

El método para mover un objeto hacia abajo es (sorpresa, sorpresa) lo opuesto a mover hacia arriba; el valor de la coordenada y debería ser positivo y mantendremos la coordenada en 0. La sintaxis será por tanto transform: translate(0,y);

HTML

En este ejemplo, mostraremos un movimiento hacia abajo ilustrándolo con una moneda. ¡Qué genios!

1	<div id="axis" class="four">
2	<img class="object coin move-down" src="images/coin.png"/>
3	</div>

CSS

#axis:hover .move-down {
	transform: translate(0,350px);
	-webkit-transform: translate(0,350px);
	-o-transform: translate(0,350px); 
	-moz-transform: translate(0,350px);
}

Ver la Muestra

3. Movimiento Diagonal

Para crear una transición diagonal, combinaremos los valores de ambas coordenadas, x e y. La sintaxis sería transform: translate(x,y). Dependiendo de la dirección, el valor de x e y podría ser negativo o positivo.

HTML

Y para demostrar nuestro movimiento diagonal, usaremos un avión de papel.

1	<div id="axis" class="five">
2	<img class="object plane move-ne" src="images/paper-plane.png"/>
3	</div>

CSS

Dirigiremos el movimiento hacia el noreste. Para el valor de la coordenada x introduciremos un valor positivo (350px) y para la coordenada y introduciremos un valor negativo 8-350px). La sintaxis será pues algo así: transform: translate(350px,-350px);

#axis:hover .move-ne {
	transform: translate(350px,-350px);
	-webkit-transform: translate(350px,-350px);
	-o-transform: translate(350px,-350px); 
	-moz-transform: translate(350px,-350px);
	
}

Siéntete libre para experimentar y dirigir el movimiento de los objetos en diagonal a lo largo de los otros ejes.

Ver Muestra

4. Rotación

El movimiento rotacional en CSS3 está regulado a través de una coordenada radial que va de 0º a 360º. Para rotar un objeto, simplemente aplica la siguiente propiedad css: transform: rotate(ndeg); en donde n es el grado de la rotación.

360º en el mismo sentido que las agujas del reloj

Para rotar un objeto en el mismo sentido que las agujas del reloj, introduciremos un valor positivo para la propiedad rotate(ndeg).

HTML

Para mostrar el movimiento, en este ejemplo usaremos un lápiz.

1	<div id="axis" class="six">
2	<img class="object pencil rotate360cw" src="images/pencil.png"/>
3	</div>

CSS

Y rotaremos el objeto 360 grados en el sentido de las agujas del reloj.

#axis:hover .rotate360cw {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg); 
	-moz-transform: rotate(360deg);
}

Ver Muestra

360º en sentido contrario a las agujas del reloj

Para rotar en sentido contrario a las agujas del reloj, introduciremos (lo adivinaste verdad) un valor negativo.

HTML

Todavía estamos usando el lápiz como objeto, pero cambiaremos su clase a .rotate360ccw.

1	<div id="axis" class="seven">
2	<img class="object pencil rotate360ccw" src="images/pencil.png"/>
3	</div>

CSS

#axis:hover .rotate360ccw {
	transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg); 
	-moz-transform: rotate(-360deg);
}

Ver Muestra

5. Cambiar la Escala

La escala es una característica interesante en CSS3. Mediante el uso de la propiedad scale(n) o scale(x,y), podemos ampliar o reducir un objeto dentro de nuestro HTML. El objeto será escalado de acuerdo a un valor n/x,y, en donde el eje x es para la anchura y el y representa la altura. Por ejemplo, si indicamos scale(2), el objeto se escalará al doble de su tamaño (se ampliará un 200%) en ambos ejes, partiendo de su tamaño inicial.

Echemos un vistazo al ejemplo de abajo.

En este ejemplo incrementaremos el tamaño del coche en un 200%, creando la ilusión de que el coche se está acercando (eso al menos esperamos).

HTML

De nuevo, el código HTML apenas ha cambiado, pero esta vez usaremos un coche como objeto.

1	<div id="axis" class="eight">
2	<img class="object car larger" src="images/car.png"/>
3	</div>

CSS

#axis:hover .larger{
	transform: scale(2);
	-webkit-transform: scale(2);
	-o-transform: scale(2); 
	-moz-transform: scale(2);
}

Ver Muestra

6. Movimientos Múltiples

Después de haber practicado con movimientos y transformaciones básicos, vamos a intentar combinar ahora algunos. Veamos.

HTML

En esta ocasión, usaremos un boomerang para demostrar la animación.

1	<div id="axis" class="ten">
2	<img class="object boomerang multiple-move" src="images/pencil.png"/>
3	</div>

CSS

El plan es mover el boomerang diagonalmente, mientras al mismo tiempo realizamos rotaciones. Para conseguirlo, simplemente tenemos que enumerar las transformaciones una tras otra separadas por espacios.

#axis:hover .multiple {
	transform: translate(350px, -350px) rotate(360deg);
	-webkit-transform: translate(350px, -350px) rotate(360deg);
	-o-transform: translate(350px, -350px) rotate(360deg);
	-moz-transform: translate(350px, -350px) rotate(360deg);
}

Ver Muestra

Conclusión

Estos ejemplos son bastante básicos, ¡existen infinitas posibilidades para explorar!. Recuerda: no olvides tener en cuenta el soporte de cada navegador cuando uses las propiedades CSS3, y no te vuelvas loco con estos efectos - estos deberían reforzar tu diseño, ¡no asfixiarlo!

Más Ejemplos de Transiciones CSS3

Para encontrar más inspiración, échale un vistazo a algunos geniales efectos y animaciones de CSS3 disponibles en Evato Market. Aquí tienes algunos ejemplos:

1. Friendly Flip 'n' Fade

Estas estupendas, sutiles y útiles transiciones CSS3 para voltear, desvanecer y aplicar fulgor, te ayudarán a expandir el estado de tu web y a utilizar tu espacio más eficazmente. Puedes elegir voltear vídeos, o mapas, o imágenes, etc. o no voltear ningún contenido en absoluto.