How to Create Animated Birds on a Web App with CSS!
By: Juan Carlos Pleitez
Tags: Flatiron School, Software Development, CSS, Animation, Software Engineering

Have you ever gone on a website and thought to yourself: “Wow this needs a little more life in it!” I say it more often than not and it was probably my biggest fear when it came down to developing my own web apps. I wanted a web app that looked dynamic and caught your attention. I mean, when you are working with so many great developers at Flatiron School, you have to find a way to push the envelope just a little bit! So my journey began to find a way to create an animation in the header of my web app that would not only add a visual aesthetic but show a bit of my personality. Thats when I stumbled on this beautiful animation created by Steven Roberts on codepen.io. (https://codepen.io/matchboxhero/pen/RLebOY) However, when I tried implementing it to my Rails or JS web app, I had to make a few changes, and learn along the way, on how to optimize it for my needs. Here’s how I got my birds to fly!

Step 1: HTML Set-up

First things first is to create some divs in the body of your html file that will contain the class names of all our items.

Step 2: What is a sprite?

Flying Bird image sprite

The first that you should know is what kind of image you’re actually working with. An image sprite is a collection of images put into a single image. In other words our animation is actually a strip of bird images that are on a constant rotation. In order for the sprite to rotate follow along with the code below:

The most important things for you to focus on are the background-image, animation-timing-function, and animation-iteration-count. Background-image is a link to the image sprite you see above. Animation-timing-function has an action, steps(10), which is essentially telling your web app to go through 10 images(defined by the width and height) in the image sprite in chronological order. We can control the amount of times this loop continues by setting the animation-iteration-count to infinite.

Step 2: Time Your Birds!

This step is SUPER important if you want your animation to look more realistic and dynamic! Imagine if you work hard to create an animation and it looks like the birds just follow the same path the whole time……yea that’s a no from me! Essentially what you’re looking for is that the animation for each individual bird starts at various times and lasts varying amounts of times, so that it looks like birds are trailing each other and flying at different speeds. Here’s how you do it:

Make sure to also add animation delays and durations to the bird-containers since they will be in charge for actually moving the birds across the screen:

Step 3: Fly!

The most exciting part! Time to fly! Now the most important part for creating any animation with css is understanding the concept of keyframes. When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. These changes occur across “waypoints”, which are defined by percentages. In our case, the birds will be changing their location on the screen as defined by their given x and y axis. Also we adjusted their scale to make it look like they’re flying closer to the viewer or further away. Here’s what the code looks like:

Conclusion

Whew this is a lot of code for four little birds! But ultimately they’re SO worth it and have honestly become a calling card of mine amongst my colleagues. I’ve used this animation for a web app that focused on eco-friendliness and another web app focused on travel. I encourage you to find other ways to utilize it and maybe even add different image sprites! While I did not add too much information on how each action works, I found that the website, https://www.w3schools.com/css/css3_animations.asp, was very helpful in learning what exactly is going on!