Animar figuras punteadas con CSS3

En este tutorial 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 que suben y bajan simplemente (más adelante explicaré como).

El ejemplo está en funcionamiento en la página de referencia (link abajo) con varios diseños (gota, corazon, flor y aro) y se puede cambiar el sentido de la rotación y ver los elementos de la animación con sus bordes.

Cómo animar los puntos

Para empezar esto se hace con animaciones CSS3 y el código HTML consiste en un DIV que contiene a 18 DIV más con un punto dentro de cada uno.

Código :

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

La explicación la haré con el círculo (lo podemos seleccionar con el formulario de abajo del ejemplo). La animación del círculo simplemente es una rotación, más lenta en el punto central, 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).

Código :

@keyframes Circulo {
    0%{transform:rotate(0deg);}
    20%{transform:rotate(120deg);}
    80%{transform:rotate(240deg);}
    100%{transform:rotate(360deg);}
}

Para crear el propio dibujo hay que hacer la animación con el trazado (de gota, círculo...) y de ésta 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 éste lleve 10px sale el siguiente, haremos una línea que parecerá contínua (para ver cómo funciona este paso en el ejemplo, visualízalo con el borde en un punto).

Cómo calcular el retardo

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 numéricamente).

Código :

[Segundos que dura la animación] / [Número de DIV] = [Retardo]
3s / 18 = 0.166s

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

Código :

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

Los códigos son muy extensos, por ese motivo no he podido añadir todos en el tutorial, aún así puedes descargar el código CSS en la página de referencia.

Aquí encontrarás el ejemplo en funcionamiento

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.