Animación con CSS: Aves volando

Hola! aquí les dejo este breve tutorial sobre como hacer una animación en CSS con aves volando por una ciudad. Suena complicado? Es mas fácil de lo que parece.

Últimamente he estado mirando vídeos sobre animaciones en css y la verdad he quedado con ganas de aprender mas a profundidad sobre el tema, así que me puse a investigar y probar un poco en codepen y esto fue lo que hice:

[codepen_embed height="400"  theme_id="0" slug_hash="jOOPZRB" animations='run' default_tab="result" user="detrasdelaweb"]See the Pen <a href='https://codepen.io/detrasdelaweb/pen/jOOPZRB'>Dos aves volando</a> by Detras de la web (<a href='https://codepen.io/detrasdelaweb'>@detrasdelaweb</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]

Explicando el código

Todo el código realmente es muy sencillo, está en codepen, pero aquí les dejo una breve explicación

El HTML:

Creamos un div y le asignamos la clase containter, dentro insertamos un div y le damos la clase bird-container. Como queremos que sean dos aves , clonamos el div bird-container y lo diferenciamos con las clases bird-container–one (agregamos –two, four, etc según la cantidad de aves que quieras agregar)

El código queda así.

<div class="container">
<div class="bird-container bird-container--one">
<div class="bird bird--one"></div>
</div>
<div class="bird-container bird-container--two">
<div class="bird bird--two"></div>
</div>
</div>

EL CSS

Primero le damos los estilos a la clase container. Le he puesto una imagen de una ciudad nocturna de fondo para que se vea cool. Lea damos el alto según como queremos que se vea, yo di un alto de 14.5rem (Mira este post donde hablo sobre las unidades de medida en css)

.container {
z-index: 1;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
// min-height: 100vh;
height: 14.5rem;
background-image: linear-gradient(to bottom, rgba(255,168,76,0.6) 0%,rgba(255,123,13,0.6) 100%), url('https://detrasdelaweb.com/fondo-ciudad-noche-luces-neon_1441-2822.jpg');
background-blend-mode: soft-light;
background-size: cover;
background-position: center center;
padding: 2rem;

}

La clase .bird

Esta clase es la que pinta las aves, aquí necesitarás algo muy importante: una imagen SVG con las distintas posiciones del ave. Si manejas ilustrator puedes hacerlo tu mismo, si no, siempre hay stocks gratis y de pago en internet, lo importante es que consigas una imagen donde se diferencien las distintas etapas de vuelo del ave, con las alas hacia arriba , hacia abajo, etc.

SVG (Scalable Vector Graphics) es un formato vectorial poco conocido pero muy útil para su uso online por su flexibilidad y por su capacidad para ofrecer gráficos con calidad.

Esa imagen la asignamos como background a la clase .bird, le decimos que ocupe el 100% y le damos un alto y ancho, estas dimensiones deben ser lo que  ocupa una sola ave de la imagen.

Lo que sigue es lo mas importante, pues define la animación que tendrá esta clase, me gustaría ahondar mas en el tema de las animaciones en varios posts así que te explicaré brevemente:

animation-name: es el nombre de la animación que tendrá, la cual vamos a definir mas adelante.

animation-timing-function:  se utiliza para especificar una función de temporización que define la velocidad en el tiempo de un objeto que se está animando. Describe cómo progresará una animación durante un ciclo de su duración, lo que le permite cambiar la velocidad durante su curso.

animation-iteration-count: La propiedad le permite especificar cuántas iteraciones, o ciclos, reproducirá la animación. En otras palabras, determina cuántas veces se repite antes de detenerse. En nuestro caso será infinito, con esto haremos que las aves salgan y vuelvan a entrar infinitamente(salen por la derecha y entran por la izquierda).

.bird {
background-image: url(https://detrasdelaweb.com/volando.svg);
background-size: auto 100%;
width: 176px;
height: 250px;
will-change: background-position;

animation-name: fly-cycle;

animation-timing-function: steps(10);
animation-iteration-count: infinite;

}

Como les dije anteriormente tendremos varias copias del ave, en mi caso dos, y aplicaremos tiempos de animación y demoras totalmente diferentes

.bird--one {
animation-duration: 1s;
animation-delay: -0.5s;
}


.bird--two {
animation-duration: 0.9s;
animation-delay: -0.75s;
}

La animación la definimos con @keyframes , y básicamente lo que se hace es indicar que el background position va a cambiar para mostrar otra posición del ave.

@keyframes fly-cycle {

100% {
background-position: -3600px 0;
}

}

La clase .bird-container

A esta clase le aplicaremos también animación, pues ademas de querer que el ave abra  y cierre las alas necesitamos que cambie de posición en el eje x de la pantalla, es decir que parezca que está volando a lo largo de la ciudad.

.bird-container {
position: absolute;
top: 20%;
left: -10%;
transform: scale(0) translateX(-10vw);
will-change: transform;

animation-name: fly-right-one;
animation-timing-function: linear;
animation-iteration-count: infinite;

}

.bird-container--one {
animation-duration: 15s;
animation-delay: 0;
}

.bird-container--two {
animation-duration: 16s;
animation-delay: 1s;
}

Para ello definimos otra animación llamada fly-right-one donde le decimos que el div debe desplazarse hacia la derecha para simular el vuelo.

@keyframes fly-right-one {

0% {
transform: scale(0.3) translateX(-10vw);
}

10% {
transform: translateY(2vh) translateX(10vw) scale(0.4);
}

20% {
transform: translateY(0vh) translateX(30vw) scale(0.5);
}

30% {
transform: translateY(4vh) translateX(50vw) scale(0.6);
}

40% {
transform: translateY(2vh) translateX(70vw) scale(0.6);
}

50% {
transform: translateY(0vh) translateX(90vw) scale(0.6);
}

60% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}

100% {
transform: translateY(0vh) translateX(110vw) scale(0.6);
}

}

Y listo!! a volar!! Trataré de explicar las animaciones en otros posts mas a fondo. Enjoy it!