Muchos cosas se pueden hacer con un poco de CSS y algo de imaginación, en esta entrada veremos algunos experimentos curiosos con animaciones que pueden servir (por ejemplo) como icono para la "Carga de Página" en nuestro site.

Primera animación con CSS

La primera animación la tome del siguiente recurso en CodePen:

La animación que a simple vista puede resultar algo confusa o tal vez algo compleja de realizar, no lo es en lo absoluto; con el siguiente CSS:

 .ball:nth-child(1) {
                background: #ff005d;
                animation: right 1s infinite ease-in-out;    
            }

            .ball:nth-child(2) {
                background: #35ff99;
                animation: left 1.1s infinite ease-in-out;
            }

            .ball:nth-child(3) {
                background: #008597;
                animation: right 1.05s infinite ease-in-out;
            }

            .ball:nth-child(4) {
                background: #ffcc00;
                animation: left 1.15s infinite ease-in-out;
            }

            .ball:nth-child(5) {
                background: #2d3443;  
                animation: right 1.1s infinite ease-in-out;
            }

            .ball:nth-child(6) {
                background: #ff7c35;  
                animation: left 1.05s infinite ease-in-out;
            }

            .ball:nth-child(7) {
                background: #4d407c;  
                animation: right 1s infinite ease-in-out;
            }

Y la animación que simplemente permite trasladar las bolas de lado a lado:

            @keyframes right {
                0%   { transform: translate(-15px);  }
            50%  { transform: translate(15px);   }
            100% { transform: translate(-15px);  }
            }

            @keyframes left {
                0%   { transform: translate(15px);   }
            50%  { transform: translate(-15px);  }
            100% { transform: translate(15px);   }
            }

Cómo verás el truco en esta animación consiste en alterar los tiempos de todas las bolas en fracciones de segundos para alargar la animación y así lograr que esta varíe en el tiempo.

Segunda animación con CSS

A partir de la primera animación tomada de CodePen se me ocurrieron un par de ideas más; la primera de ella (y segundo experimento con amimaciones) es el siguiente:

Los trucos aquí son:

1. Ubicar a las cuatro pelotas en un mismo sitio con position: absolute.
2. Alterar la posición de las pelotas con transform: translate(X,Y) tanto en el CSS establecido en las bolas como en las animaciones.

Una vez hecho esto nos damos cuenta que hay que realizar una animación por cada pelota (cuatro para este experimento) que aunque son similares el orden se sus valores varían o mejor dicho están desplazados para evitar que las pelotas se solapen.

Explicado lo anterior nos resultará sencillo entender el siguiente CSS (incluido las animaciones):

       @keyframes move1 {
             0%   { transform: translate(0,0);   }
            25%  { transform: translate(50px,0);    }
            50%  { transform: translate(50px,50px);    }
            75%  { transform: translate(0,50px);    }
            100% { transform: translate(0,0);   }
            }

            @keyframes move2 {
             0%  { transform: translate(50px,0);    }
            25%  { transform: translate(50px,50px);    }
            50%  { transform: translate(0,50px);    }
            75% { transform: translate(0,0);   }
            100%  { transform: translate(50px,0);    }
            }

            @keyframes move3 {
             0%  { transform: translate(50px,50px);    }
            25%  { transform: translate(0,50px);    }
            50% { transform: translate(0,0);   }
            75%  { transform: translate(50px,0);    }
            100%  { transform: translate(50px,50px);    }
            }

            @keyframes move4 {
             0%  { transform: translate(0,50px);    }
            25% { transform: translate(0,0);   }
            50%  { transform: translate(50px,0);    }
            75%  { transform: translate(50px,50px);    }
            100%  { transform: translate(0,50px);    }
            }

Para este segundo experimento con animaciones en CSS no es necesario alterar los tiempos de las animaciones.

Tercera animación con CSS

Finalmente tenemos la tercera animación la cual resulta en una modificación de la tercera para que las bolas/cuadros se muevan hacia el centro y cambien su forma u aspecto:

Y esto se logra con el siguiente CSS:

     @keyframes move1 {
                0%   { transform: translate(0,0);   }
            25%  { transform: translate(25px,25px);    }
            50%  { transform: translate(50px,0); border-radius: 0;   }
            75%  { transform: translate(25px,25px);    }
            100%   { transform: translate(0,0);   }
            }

            @keyframes move2 {
                0%  { transform: translate(50px,0);    }
            25%  { transform: translate(25px,25px);    }
            50%   { transform: translate(0,0);  border-radius: 0; }
            75%  { transform: translate(25px,25px);    }
            100%  { transform: translate(50px,0);    }
            }

            @keyframes move3 {
                0%   { transform: translate(50px,50px);   }
            25%  { transform: translate(25px,25px);    }
            50%  { transform: translate(0,50px);   border-radius: 0; }
            75%  { transform: translate(25px,25px);    }
            100%   { transform: translate(50px,50px);   }
            }

            @keyframes move4 {
                0%  { transform: translate(0,50px);    }
            25%  { transform: translate(25px,25px);    }
            50%   { transform: translate(50px,50px);  border-radius: 0; }
            75%  { transform: translate(25px,25px);    }
            100%  { transform: translate(0,50px);    }
            }

Otro cambio interesante sería cambiarle el color tamaño, rotarlas ¡o todo junto!.

Conclusiones

El porqué de esta entrada se basa en lograr alguna inspiración cuando desees animar elementos en CSS y como viste anteriormente con CSS mínimos se pueden obtener grandes resultados.