CSS Animation Tutorial — 3

Image for post
Image for post
Photo by Kobu Agency on Unsplash

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

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

We will start where we left in part 2, and continue with Mario Kart Animations.

We will leave Mario with his infinite animation and bring his brother Luigi, to learn further animation. So, go ahead and add Luigi in index.html

Image for post
Image for post
Luigi

Next, also add styles for him in style.css

Image for post
Image for post
Luigi styles

It will show Luigi in browser.

Image for post
Image for post
Luigi in browser

We will use the same animation for Luigi as Mario, but we will give his direction as reverse.

reverse

The animation-direction: reverse property, will have Luigi go from right to left.

Image for post
Image for post
Luigi reverse

Now, you might have noticed from Mario that he is slowing down towards the right end.

This is because of animation-timing-function, which is like the transition-timing-functionwe learnt in part 1

It is by default ease, which slow start, then fast, then end slowly.

We will make Mario travel with linear speed i.e. with the same speed from start to end.

Image for post
Image for post
linear speed

So, Mario travel at linear speed now.

Image for post
Image for post
linear mario

All the different animation properties which we have used for Mario and Luigi, can be used in a single line with shorthand notation.

We will learn it with clouds. So, let’s add two clouds images in our sky.

Image for post
Image for post
Clouds

It will show these two clouds.

Image for post
Image for post
Two clouds

Let’s give the two clouds some positioning, so that they overlap each other.

Image for post
Image for post
cloud positioning

It will show them as below.

Image for post
Image for post
Cloud positioned

Now, we will animate them with the shortcuts. The animation shortcut takes animation name, duration, timing-function, iteration-count, direction in order.

Image for post
Image for post
animation shortcuts

It will show these clouds moving slowly from right to left.

Image for post
Image for post
Cloud moving

We will now learn about chaining two animations. We will create a jump animation for Mario. Now, it will have 3 states. So, we cannot use from and to. We will use percentages in such cases.

Image for post
Image for post
3 state animations

Now, we will chain it. As you can see, we are using shorthand notation for Mario’s earlier drive animation. After that we are using a comma(,) and putting the jump animation.

Image for post
Image for post
Chaining animation

Now, our Mario will jump once for 0.3s after a delay of 1.2s, with ease timing.

Image for post
Image for post
Jumping Mario

It completes our Mario animation and part 3. You can find the code for the same here.

You can find the final part 4 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