DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
22-06-2015

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Atomo con CSS

Atomo con CSS

Botón flotante

Botón flotante

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

Algunos artículos que te pueden interesar

Transformando un botón de un estado a otro con CSS

Transformando un botón de un estado a otro con CSS

Se explica cómo transformar un botón con CSS y JavaScript.

Andrés Cruz 02-08-2016

Creando reflejos en nuestras imágenes con webkit-box-reflect

Creando reflejos en nuestras imágenes con webkit-box-reflect

Se explica cómo crear un reflejo de una imagen con la propiedad webkit-box-reflect, además de su sintaxis básica que permite cambiar la posición, desplazamiento y hasta la posibilidad de aplicar máscaras para crear reflejos

Andrés Cruz 05-07-2016

El elemento symbol para los SVG en HTML

El elemento symbol para los SVG en HTML

En esta entrada veremos un elemento muy útil para trabajar con los SVG que es el elemento symbol; este elemento ahorra mucho trabajo y permite agrupar una serie de figuras básicas y pintarlos empleando el elemento use.

Andrés Cruz 01-06-2015