loading...
Cover image for CSS Animation Tutorial — 2

CSS Animation Tutorial — 2

nabendu82 profile image Nabendu Originally published at nabendu.blog Updated on ・3 min read

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 HtmlBasic Html

Next, put these basic styles in style.css

Basic stylesBasic styles

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

Basic browserBasic 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 MarioAdding Mario

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

Mario in tracksMario in tracks

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

Mario stylesMario styles

It will move him a bit up.

Moving Mario upMoving 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

KeyframesKeyframes

It will show this nice Mario animation.

Mario animationMario 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-modeanimation-fill-mode

It will show the below animation.

MarioMario

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 animationinfinite animation

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

Infinite MarioInfinite Mario

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

Discussion

pic
Editor guide