How to build some cool animation with HTML and CSS

In this post, we are going to make Katara & Gingi's page even cooler by adding some animations. We are going to start with this page. If you don't have the code, download it from here.

Firstly we will animate the header. How about we make Katara come in from the left and Gingi come in from the right? Let's give it a try.

So first of all let's split "Katara &" and "Gingi" into two containers because they will be coming from different sides so we have to write different CSS for them.

Then let's animate "Katara &" by adding the following CSS.

What exactly are we doing in line 15 - 28 here?

Line 16: we tell the browser we want to give the "Katara &" element an animation, and the animation is called katara_animation.

Line 17: we want the animation to last 2 seconds.

Line 19: we are creating the animation here named katara_animation so the "Katara &" element will find this animation by the name and apply the styles.

Line 20 - 23: 0% means the beginning of the animation, similarly we can add as many "frames" as we like, 20%, 30%, 50%, etc. It just means the percentage of the animation duration. So we have set the animation duration to 2 seconds. So all the styles inside 0% brackets will apply the moment when the animation starts. 20% will apply at 400ms, 50% will apply at 1 second.

Line 24: 100% means the end of the animation. And when the animation ends, the styles in @keyframes stop applying so we can ignore line 19 - 28 after 2 seconds has passed.

In this animation, we say in the beginning, the left side of "Katara &" text should be at -400px from the original position so it will be on the left side of the screen. Then we say in the end the left side of the text should be at 0px from the original position which is exactly the original position.

Save the files and refresh the page, you should see "Katara &" slides in from the left when the page loads. Cool!

Let's do the same for Gingi but we want it to come in from the right.

Save the files and let's check again. Pretty cool right?

Can we do more? Let's make the animation a little smooth by adding this line.

How about we change the colour of the text at the same time of the sliding in.

Better! Let's keep this.

Now let's also animate the text on the sides, we can make them slide up from the bottom. Similar to what we have already done, add the CSS like the following.

Now it's pretty good. Learn more about CSS animation and what else you can animate on W3Schools.

Let's do one more small thing to make it look even fancier.

Let's make the background a little bit more dynamic by adding a gradient effect.

It's super simple. Instead of doing background-color, we can use background-image with linear-gradient function. And we say we want the direction of the gradient to be from top left to bottom right. The starting colour will be grey and the ending colour to be pink.

And we will get something like this. Amazing, it looks like a professional design now.

Wait I got another idea, let's bring Katara and Gingi's favourite food in.

Let's add it to the HTML code first. Right click on the picture above and save it to your computer, then drag it into the folder where your HTML and CSS files are.

Then add the image to the end of the body.

And add the styles to make it appear on the top left of the page and a little smaller

You should see something like this.

Now let's make it fly across the page.

Notice in line 94, we set the animation iteration to infinite so it will keep going infinitely.

Can we rotate the cat food while it's flying to make it more dynamic? Let's try.

Google "CSS rotate an image", you will find this W3Schools tutorial on transform property.

Try a few of them and see what you like. I'm going to go with rotateZ so I will add it to each keyframe.

Pretty cool huh? I'm pretty happy now. So let's leave it here.

Check out the source code here if you need.

Now it's your turn to come up with an idea and make it happen.