CSS Animation Tutorial — 2

Welcome to part 2 of the series. You can find part 1 here.

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

Image for post
Image for post
Basic Html

Next, put these basic styles in style.css

Image for post
Image for post
Basic styles

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

Image for post
Image for post
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.

Image for post
Image for post
Mario in tracks

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

Image for post
Image for post
Mario styles

It will move him a bit up.

Image for post
Image for post
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

Image for post
Image for post
Keyframes

It will show this nice Mario animation.

Image for post
Image for post
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.

Image for post
Image for post
animation-fill-mode

It will show the below animation.

Image for post
Image for post
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.

Image for post
Image for post
infinite animation

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

Image for post
Image for post
Infinite Mario

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

You can find part 3 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store