CSS Animation Tutorial — 2

Welcome to part 2 of the series.

This series is inspired by this awesome YouTube series by The Net Ninja.

We will start by learning about keyframes and applying them to create Mario Kart Animations.

So, first create a folder mario and inside it two files index.html and style.css

Next, put this basic html in index.html

Basic Html

Next, put these basic styles in style.css

Basic styles

And in the web-browser open the index.html . It will show the background for our Mario to play.

Basic browser

Now, it’s time to put Mario image in the tracks. We already have some images in the img folder. Make sure to have it. You can get it from my github source code for the project.

Adding Mario

Now, it will show our hero Mario in the tracks.

Mario in tracks

Now, we will animate Mario but first will fix him a bit by moving him up.

Mario styles

It will move him a bit up.

Moving Mario up

Now, we will add our animation by keyframes. We declare a keyframe animation drive and then have a from and to properties in it. We put translateX inside them. It means Mario will start from 0 on x-axis and go till 1200px on x-axis.

We then add that in our mario class by giving animation-name: drive . We also add an animation-duration: 3s

Keyframes

It will show this nice Mario animation.

Mario animation

As, you might have seen in the above animation that after Mario reaches to the end i.e. 1200px, he returns back to his original position.

We can change this by animation-fill-mode: forwards; It means that it should stay at the to position i.e. 1200px after the animation is over.

animation-fill-mode

It will show the below animation.

Mario

Now, we will use animation-fill-mode: both;to make Mario extend the animation property in both directions. We are also using animation-iteration-count: infinite; to achieve the infinite loop.

We are also staring Mario off screen and ending him off screen.

infinite animation

It will show our hero Mario, moving nicely on the track infinitely.

Infinite Mario

This concludes part 2 of the series. You can find the code for the same here.