26

8

Animaciones: rotación de puntos

En este artículo os enseñaré un ejemplo de las animaciones que se pueden hacer con CSS3 gracias a Animation y a transform:rotate() con unos simples puntos (•) e imaginación.
Para hacer estas animaciones simplemente hago girar todos los puntos y suben y bajan, simplemente (más adelante explicaré como).
Nota: funciona solo en los navegadores que cumplen los estándares.

Como funciona

Para empezar esto se hace con animaciones de CSS3 (podeis ver una documentación de como usarlas) y el código HTML consiste en un DIV que contiene a 18 DIV más con un punto dentro de cada uno.
Nota: el código CSS3 real tiene prefijos -webkit- y -moz- (en la propiedad animation y transform) pero los omitiré en el resto de artículo.

1. <div> <!-- Contenedor -->

<div>&bull;</div> <!-- 18 x DIV -->

2. <div>

La explicación la haré con el círculo (lo podemos seleccionar con el formulario de debajo del ejemplo).
La animación del círculo simplemente es una rotación, más lenta en el punto central (para que parezca un trazo lo haremos con un efecto que explico después), y el keyframe del círculo, que es añadido a todos los DIV con el punto dentro es el siguiente (si no sabes aún que es un keyframe puedes verlo en la documentación de animaciones):

1. @keyframes Circulo {
   

0%{transform:rotate(0deg);}


20%{transform:rotate(120deg);}


80%{transform:rotate(240deg);}


100%{transform:rotate(360deg);}


2. }
   

Para crear el propio dibujo hay que hacer la animación con el trazado (de gota, circulo...) y de esta forma se moverán los puntos, pero irán todos juntos, para separarlos tenemos que establecer un retardo a la animación de cada punto, es decir: si cuando el primer punto lleva 10px recorridos y sale el siguiente, y cuando este lleve 10px sale el siguiente, haremos una línea que parecerá continua (para ver como funciona este paso en el ejemplo visualízalo con el borde en un punto).
Para añadir el retardo usamos la propiedad animation-delay y en este caso además usamos la pseudo-clase de CSS3 nth-child (que ahora lo que hará es seleccionar cada DIV numericamente).

1. Como calcular el retardo:
2. [Segundos que dura la animación] / [Número de DIV] = [Retardo]
3. 
   
4. Como calcular el retardo:
5. 3s / 18 = 0.166s

Ahora tenemos que añadir el retardo a todos los DIV incrementando el retardo de todos 0.166s:

1. /* Al primer DIV le ponemos un retardo de 0.166s */
   
2. .CONTENEDOR div:nth-child(1) {animation-delay:0.167s;}
3. /* En el segundo 2 x 0.166s */
   
4. .CONTENEDOR div:nth-child(2) {animation-delay:0.333s;}
5. /* En los siguientes es el mismo procedimiento */
   

Los códigos son muy extensos, por ese motivo no he podido añadir todos en el artículo, aún así puedes descargar el código CSS.