En una anterior de ANIMANDO COSAS CON CSS vimos como crear algunas sencillas animaciones con un poco de CSS que inclusive podrían usarse como loaders.
En esta entrada veremos cómo crear un par de simples, sencillos y muy atractivos loaders.
Definiendo la estructura de los loaders con CSS
El HTML es mínimo y en donde cada span será un pequeño círculo animado:
<div id="loader-2">
<span></span><span></span><span></span><span></span><span></span>
</div>Definiendo la forma de los loaders con CSS
Una vez que tenemos la estructura (HTML) aplicamos un poco de estilo para darle la forma que deseamos (en nuestro ejemplo círculos); el CSS base es el siguiente:
span {
display: inline-block;
height: 15px;
width: 15px;
background: rgba(204, 0, 0, 0.8);
border-radius: 500px;
}1. Loader
Recordando un poco el primer efecto que queremos lograr:
Como mencionamos anteriormente, cada círculo corresponde a un span el cual alteramos el inicio de la animación emplear la propiedad animation-delay para retrasar algunos segundos la misma:
#loader-1 span:nth-child(1) {
animation: scale 1s 0.1s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
@keyframes scale{
0%{ transform:scale(0.0);}
25%{ transform:scale(0.9,0.9); background:rgba(204, 0, 0, 0.8); }
50%{ transform:scale(1,1); margin:0 3px; background:rgba(204, 0, 0, 1); }
100%{ transform:scale(0.0);}
}Puedes ver el experimento completo en los siguientes enlaces:
2. Loader
Para el segundo loader:
Empleamos la siguiente animación:
#loader-2 span:nth-child(1) {
animation: push 1s 0.1s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
}
@keyframes push{
0%{ transform:translateX(0px) scale(0.9,0.6)background:rgba(204, 0, 0, 0.8);}
50%{ transform:translateY(-30px) scale(0.5,1.1); background:rgba(204, 0, 0, 1); }
100%{ transform:translateX(0px) scale(0.9,0.6)background:rgba(204, 0, 0, 0.8);}
}De igual manera puedes ver el experimento completo en los siguientes enlaces:
Como habrás notado, empleamos el valor cubic-bezier para personalizar el comportamiento de las animaciones; este tema ya fue tratado en la entrada anterior compartida.
Consideraciones sobre el código CSS anterior
El truco aquí para lograr este efecto sin agregar una gran cantidad de CSS, es emplear la propiedad animation-delay para retrasar algunos segundos.
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.
3. Animación con CSS creando un loader
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.
4. 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 aminaciones) es el siguiente:
Los trucos aquí son:
- Ubicar a las cuatro pelotas en un mismo sitio con
position: absolute. - 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.
5. 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!.
Creando un loader animado con solo CSS
Veremos cómo realizar una sencilla animación con solo CSS como la mostrada en el inicio de esta entrada; es una animación bastante sencilla de realizar y su estructura sigue la misma idea que otas la de tener un contenedor con div y otro con after.
Dicho esto, se requieren de dos partes para realizar esta estructura; un simple div para la circunferencia hueca:
.circulo{
width:70px;
height:70px;
border-radius:50%;
border:5px solid rgb(204, 0, 0);
margin: 0 auto;
}Y dibujar el contenedor extra de la siguiente manera:
.circulo:after{
content:' ';
width:20px;
height:20px;
background:rgb(204, 0, 0);
display:block;
border-radius:50%;
}Importante el uso del display:block para mostrar este contenedor extra.
Con esto tenemos casi todo listo, ahora nos falta crear la animación y con esto tendremos nuestro loader CSS 100% funcional.
Creando la animación con keyframes
La animación CSS es muy sencilla, con tan solo indicar la rotación mediante la propiedad transform tenemos listo el loader:
@keyframes rotar { 100% { transform: rotate(360deg); transform:rotate(360deg); } }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.
El siguiente experimento recomendado, es crear una Luna con CSS animada.
Acepto recibir anuncios de interes sobre este Blog.
Los loaders son un recurso de los más vistosos y necesarios en cualquier aplicación al momento de realizar una tarea que requiera tiempo; en esta entrada veremos cómo crear un par de loaders.