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

Hover over the cards

Hover over the cards

Loader cuadrado

Loader cuadrado

Atomo con CSS

Atomo con CSS

Algunos artículos que te pueden interesar

Entendiendo la propiedad perspective (perspectiva) en CSS

Entendiendo la propiedad perspective (perspectiva) en CSS

La propiedad perspective agrega un efecto tridimensional afectando la distancia que hay entre un observador y las figuras en el plano a través de una variación en el eje Z; en otras palabras, permite acercar/alejar figuras en el plano.

Andrés Cruz 05-02-2015

Construyendo nuestro propio logo Android con SVG en HTML

Construyendo nuestro propio logo Android con SVG en HTML

En esta entrada abordaremos un tema un poco más práctico y veremos cómo construir nuestro propio logo de Android empleando lo hablado hasta el momento.

Andrés Cruz 21-05-2015

4+1 selectores CSS esenciales al momento de programar

4+1 selectores CSS esenciales al momento de programar

En esta entrada les mostraré los principales selectores empleados por mi persona; con los selectores podemos ahorrar mucho trabajo y evitar así "inventar" nombres a través de clases o identificadores para referenciar o seleccionar elementos.

Andrés Cruz 26-03-2015