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
Next, also add styles for him in
It will show Luigi in browser.
We will use the same animation for Luigi as Mario, but we will give his direction as reverse.
animation-direction: reverse property, will have Luigi go from right to left.
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.
So, Mario travel at linear speed now.
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.
It will show these two clouds.
Let’s give the two clouds some positioning, so that they overlap each other.
It will show them as below.
Now, we will animate them with the shortcuts. The
animation shortcut takes animation name, duration, timing-function, iteration-count, direction in order.
It will show these clouds moving slowly from right to left.
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.
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