Connect with us!

Mario Jump animation using HTML and CSS tutorial for beginners using VSCode

Salow
January 21, 2022
CSS, Game

Mario is the protagonist character staring in the Mario retro game. Have you ever wondered how to create them using CSS and use it in our website? In this tutorial we will be looking into Mario and its jumping animation.

In this article we will see how to create Mario jump animation using CSS.

The most important properties that we use to create the Mario Jumping Animation are:

The box-shadow CSS property adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

Table of Contents

Mario Jump Code Block

Here is the CSS class for implementing it.

.mario {
  width: 5px;
  height: 5px;
  box-shadow: 0px 0px 0px transparent, 130px 5px #ffa500, 135px 5px #ffa500,
    140px 5px #ffa500, 95px 10px #de4513, 100px 10px #de4513, 105px 10px #de4513,
    110px 10px #de4513, 115px 10px #de4513, 130px 10px #ffa500,
    135px 10px #ffa500, 140px 10px #ffa500, 90px 15px #de4513, 95px 15px #de4513,
    100px 15px #de4513, 105px 15px #de4513, 110px 15px #de4513,
    115px 15px #de4513, 120px 15px #de4513, 125px 15px #de4513,
    130px 15px #de4513, 135px 15px #ffa500, 140px 15px #ffa500,
    90px 20px #a52a2a, 95px 20px #a52a2a, 100px 20px #a52a2a, 105px 20px #ffa500,
    110px 20px #ffa500, 115px 20px #000, 120px 20px #ffa500, 130px 20px #4545bb,
    135px 20px #4545bb, 140px 20px #4545bb, 85px 25px #a52a2a, 90px 25px #ffa500,
    95px 25px #a52a2a, 100px 25px #ffa500, 105px 25px #ffa500,
    110px 25px #ffa500, 115px 25px #000, 120px 25px #ffa500, 125px 25px #ffa500,
    130px 25px #4545bb, 135px 25px #4545bb, 140px 25px #4545bb,
    85px 30px #a52a2a, 90px 30px #ffa500, 95px 30px #a52a2a, 100px 30px #a52a2a,
    105px 30px #ffa500, 110px 30px #ffa500, 115px 30px #ffa500,
    120px 30px #a52a2a, 125px 30px #ffa500, 130px 30px #ffa500,
    135px 30px #ffa500, 140px 30px #4545bb, 85px 35px #a52a2a, 90px 35px #a52a2a,
    95px 35px #ffa500, 100px 35px #ffa500, 105px 35px #ffa500,
    110px 35px #ffa500, 115px 35px #a52a2a, 120px 35px #a52a2a,
    125px 35px #a52a2a, 130px 35px #a52a2a, 135px 35px #a52a2a,
    95px 40px #ffa500, 100px 40px #ffa500, 105px 40px #ffa500,
    110px 40px #ffa500, 115px 40px #ffa500, 120px 40px #ffa500,
    125px 40px #ffa500, 130px 40px #4545bb, 75px 45px #4545bb, 80px 45px #4545bb,
    85px 45px #4545bb, 90px 45px #4545bb, 95px 45px #4545bb, 100px 45px #de4513,
    105px 45px #4545bb, 110px 45px #4545bb, 115px 45px #4545bb,
    120px 45px #de4513, 125px 45px #4545bb, 70px 50px #4545bb, 75px 50px #4545bb,
    80px 50px #4545bb, 85px 50px #4545bb, 90px 50px #4545bb, 95px 50px #4545bb,
    100px 50px #4545bb, 105px 50px #de4513, 110px 50px #4545bb,
    115px 50px #4545bb, 120px 50px #4545bb, 125px 50px #de4513, 140px 50px #000,
    65px 55px #ffa500, 70px 55px #ffa500, 75px 55px #4545bb, 80px 55px #4545bb,
    85px 55px #4545bb, 90px 55px #4545bb, 95px 55px #4545bb, 100px 55px #4545bb,
    105px 55px #de4513, 110px 55px #de4513, 115px 55px #de4513,
    120px 55px #de4513, 125px 55px #de4513, 140px 55px #000, 65px 60px #ffa500,
    70px 60px #ffa500, 75px 60px #ffa500, 85px 60px #de4513, 90px 60px #de4513,
    95px 60px #4545bb, 100px 60px #de4513, 105px 60px #de4513, 110px 60px #ff0,
    115px 60px #de4513, 120px 60px #de4513, 125px 60px #ff0, 130px 60px #de4513,
    135px 60px #000, 140px 60px #000, 70px 65px #ffa500, 80px 65px #000,
    85px 65px #de4513, 90px 65px #de4513, 95px 65px #de4513, 100px 65px #de4513,
    105px 65px #de4513, 110px 65px #de4513, 115px 65px #de4513,
    120px 65px #de4513, 125px 65px #de4513, 130px 65px #de4513, 135px 65px #000,
    140px 65px #000, 75px 70px #000, 80px 70px #000, 85px 70px #000,
    90px 70px #de4513, 95px 70px #de4513, 100px 70px #de4513, 105px 70px #de4513,
    110px 70px #de4513, 115px 70px #de4513, 120px 70px #de4513,
    125px 70px #de4513, 130px 70px #de4513, 135px 70px #000, 140px 70px #000,
    70px 75px #000, 75px 75px #000, 80px 75px #000, 85px 75px #de4513,
    90px 75px #de4513, 95px 75px #de4513, 100px 75px #de4513, 105px 75px #de4513,
    110px 75px #de4513, 115px 75px #de4513, 70px 80px #000, 85px 80px #de4513,
    90px 80px #de4513, 95px 80px #de4513;
}

Yay! We have created the initial Mario Character.

Here is the output:

Mario Character

Mario Jump CSS Animation

Jump animation is achieved by moving the object along the y axis.

Following are the classes used for animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes jump {
  0%,
  100% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(100px);
  }
}

The following way is to declare the CSS Class inside the class block.

.mario {
  width: 5px;
  height: 5px;
  box-shadow: 0px 0px 0px transparent, 130px 5px #ffa500, 135px 5px #ffa500,
    140px 5px #ffa500, 95px 10px #de4513, 100px 10px #de4513, 105px 10px #de4513,
    110px 10px #de4513, 115px 10px #de4513, 130px 10px #ffa500,
    135px 10px #ffa500, 140px 10px #ffa500, 90px 15px #de4513, 95px 15px #de4513,
    100px 15px #de4513, 105px 15px #de4513, 110px 15px #de4513,
    115px 15px #de4513, 120px 15px #de4513, 125px 15px #de4513,
    130px 15px #de4513, 135px 15px #ffa500, 140px 15px #ffa500,
    90px 20px #a52a2a, 95px 20px #a52a2a, 100px 20px #a52a2a, 105px 20px #ffa500,
    110px 20px #ffa500, 115px 20px #000, 120px 20px #ffa500, 130px 20px #4545bb,
    135px 20px #4545bb, 140px 20px #4545bb, 85px 25px #a52a2a, 90px 25px #ffa500,
    95px 25px #a52a2a, 100px 25px #ffa500, 105px 25px #ffa500,
    110px 25px #ffa500, 115px 25px #000, 120px 25px #ffa500, 125px 25px #ffa500,
    130px 25px #4545bb, 135px 25px #4545bb, 140px 25px #4545bb,
    85px 30px #a52a2a, 90px 30px #ffa500, 95px 30px #a52a2a, 100px 30px #a52a2a,
    105px 30px #ffa500, 110px 30px #ffa500, 115px 30px #ffa500,
    120px 30px #a52a2a, 125px 30px #ffa500, 130px 30px #ffa500,
    135px 30px #ffa500, 140px 30px #4545bb, 85px 35px #a52a2a, 90px 35px #a52a2a,
    95px 35px #ffa500, 100px 35px #ffa500, 105px 35px #ffa500,
    110px 35px #ffa500, 115px 35px #a52a2a, 120px 35px #a52a2a,
    125px 35px #a52a2a, 130px 35px #a52a2a, 135px 35px #a52a2a,
    95px 40px #ffa500, 100px 40px #ffa500, 105px 40px #ffa500,
    110px 40px #ffa500, 115px 40px #ffa500, 120px 40px #ffa500,
    125px 40px #ffa500, 130px 40px #4545bb, 75px 45px #4545bb, 80px 45px #4545bb,
    85px 45px #4545bb, 90px 45px #4545bb, 95px 45px #4545bb, 100px 45px #de4513,
    105px 45px #4545bb, 110px 45px #4545bb, 115px 45px #4545bb,
    120px 45px #de4513, 125px 45px #4545bb, 70px 50px #4545bb, 75px 50px #4545bb,
    80px 50px #4545bb, 85px 50px #4545bb, 90px 50px #4545bb, 95px 50px #4545bb,
    100px 50px #4545bb, 105px 50px #de4513, 110px 50px #4545bb,
    115px 50px #4545bb, 120px 50px #4545bb, 125px 50px #de4513, 140px 50px #000,
    65px 55px #ffa500, 70px 55px #ffa500, 75px 55px #4545bb, 80px 55px #4545bb,
    85px 55px #4545bb, 90px 55px #4545bb, 95px 55px #4545bb, 100px 55px #4545bb,
    105px 55px #de4513, 110px 55px #de4513, 115px 55px #de4513,
    120px 55px #de4513, 125px 55px #de4513, 140px 55px #000, 65px 60px #ffa500,
    70px 60px #ffa500, 75px 60px #ffa500, 85px 60px #de4513, 90px 60px #de4513,
    95px 60px #4545bb, 100px 60px #de4513, 105px 60px #de4513, 110px 60px #ff0,
    115px 60px #de4513, 120px 60px #de4513, 125px 60px #ff0, 130px 60px #de4513,
    135px 60px #000, 140px 60px #000, 70px 65px #ffa500, 80px 65px #000,
    85px 65px #de4513, 90px 65px #de4513, 95px 65px #de4513, 100px 65px #de4513,
    105px 65px #de4513, 110px 65px #de4513, 115px 65px #de4513,
    120px 65px #de4513, 125px 65px #de4513, 130px 65px #de4513, 135px 65px #000,
    140px 65px #000, 75px 70px #000, 80px 70px #000, 85px 70px #000,
    90px 70px #de4513, 95px 70px #de4513, 100px 70px #de4513, 105px 70px #de4513,
    110px 70px #de4513, 115px 70px #de4513, 120px 70px #de4513,
    125px 70px #de4513, 130px 70px #de4513, 135px 70px #000, 140px 70px #000,
    70px 75px #000, 75px 75px #000, 80px 75px #000, 85px 75px #de4513,
    90px 75px #de4513, 95px 75px #de4513, 100px 75px #de4513, 105px 75px #de4513,
    110px 75px #de4513, 115px 75px #de4513, 70px 80px #000, 85px 80px #de4513,
    90px 80px #de4513, 95px 80px #de4513;
  animation: jump 2s linear infinite; 
}

Following is the output Mario Jump animation!

Here is the output:

Mario Character Jump

You can find the complete coding tutorial in the following YouTube video.

YouTube video creating Mario jump animation using CSS

YouTube Mario Jump Animation

Here is the complete code of HTML and CSS for creating Mario Character Jump Animation

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .mario {
  width: 5px;
  height: 5px;
  box-shadow: 0px 0px 0px transparent, 130px 5px #ffa500, 135px 5px #ffa500,
    140px 5px #ffa500, 95px 10px #de4513, 100px 10px #de4513, 105px 10px #de4513,
    110px 10px #de4513, 115px 10px #de4513, 130px 10px #ffa500,
    135px 10px #ffa500, 140px 10px #ffa500, 90px 15px #de4513, 95px 15px #de4513,
    100px 15px #de4513, 105px 15px #de4513, 110px 15px #de4513,
    115px 15px #de4513, 120px 15px #de4513, 125px 15px #de4513,
    130px 15px #de4513, 135px 15px #ffa500, 140px 15px #ffa500,
    90px 20px #a52a2a, 95px 20px #a52a2a, 100px 20px #a52a2a, 105px 20px #ffa500,
    110px 20px #ffa500, 115px 20px #000, 120px 20px #ffa500, 130px 20px #4545bb,
    135px 20px #4545bb, 140px 20px #4545bb, 85px 25px #a52a2a, 90px 25px #ffa500,
    95px 25px #a52a2a, 100px 25px #ffa500, 105px 25px #ffa500,
    110px 25px #ffa500, 115px 25px #000, 120px 25px #ffa500, 125px 25px #ffa500,
    130px 25px #4545bb, 135px 25px #4545bb, 140px 25px #4545bb,
    85px 30px #a52a2a, 90px 30px #ffa500, 95px 30px #a52a2a, 100px 30px #a52a2a,
    105px 30px #ffa500, 110px 30px #ffa500, 115px 30px #ffa500,
    120px 30px #a52a2a, 125px 30px #ffa500, 130px 30px #ffa500,
    135px 30px #ffa500, 140px 30px #4545bb, 85px 35px #a52a2a, 90px 35px #a52a2a,
    95px 35px #ffa500, 100px 35px #ffa500, 105px 35px #ffa500,
    110px 35px #ffa500, 115px 35px #a52a2a, 120px 35px #a52a2a,
    125px 35px #a52a2a, 130px 35px #a52a2a, 135px 35px #a52a2a,
    95px 40px #ffa500, 100px 40px #ffa500, 105px 40px #ffa500,
    110px 40px #ffa500, 115px 40px #ffa500, 120px 40px #ffa500,
    125px 40px #ffa500, 130px 40px #4545bb, 75px 45px #4545bb, 80px 45px #4545bb,
    85px 45px #4545bb, 90px 45px #4545bb, 95px 45px #4545bb, 100px 45px #de4513,
    105px 45px #4545bb, 110px 45px #4545bb, 115px 45px #4545bb,
    120px 45px #de4513, 125px 45px #4545bb, 70px 50px #4545bb, 75px 50px #4545bb,
    80px 50px #4545bb, 85px 50px #4545bb, 90px 50px #4545bb, 95px 50px #4545bb,
    100px 50px #4545bb, 105px 50px #de4513, 110px 50px #4545bb,
    115px 50px #4545bb, 120px 50px #4545bb, 125px 50px #de4513, 140px 50px #000,
    65px 55px #ffa500, 70px 55px #ffa500, 75px 55px #4545bb, 80px 55px #4545bb,
    85px 55px #4545bb, 90px 55px #4545bb, 95px 55px #4545bb, 100px 55px #4545bb,
    105px 55px #de4513, 110px 55px #de4513, 115px 55px #de4513,
    120px 55px #de4513, 125px 55px #de4513, 140px 55px #000, 65px 60px #ffa500,
    70px 60px #ffa500, 75px 60px #ffa500, 85px 60px #de4513, 90px 60px #de4513,
    95px 60px #4545bb, 100px 60px #de4513, 105px 60px #de4513, 110px 60px #ff0,
    115px 60px #de4513, 120px 60px #de4513, 125px 60px #ff0, 130px 60px #de4513,
    135px 60px #000, 140px 60px #000, 70px 65px #ffa500, 80px 65px #000,
    85px 65px #de4513, 90px 65px #de4513, 95px 65px #de4513, 100px 65px #de4513,
    105px 65px #de4513, 110px 65px #de4513, 115px 65px #de4513,
    120px 65px #de4513, 125px 65px #de4513, 130px 65px #de4513, 135px 65px #000,
    140px 65px #000, 75px 70px #000, 80px 70px #000, 85px 70px #000,
    90px 70px #de4513, 95px 70px #de4513, 100px 70px #de4513, 105px 70px #de4513,
    110px 70px #de4513, 115px 70px #de4513, 120px 70px #de4513,
    125px 70px #de4513, 130px 70px #de4513, 135px 70px #000, 140px 70px #000,
    70px 75px #000, 75px 75px #000, 80px 75px #000, 85px 75px #de4513,
    90px 75px #de4513, 95px 75px #de4513, 100px 75px #de4513, 105px 75px #de4513,
    110px 75px #de4513, 115px 75px #de4513, 70px 80px #000, 85px 80px #de4513,
    90px 80px #de4513, 95px 80px #de4513;
  animation: jump 2s linear infinite;
}
@keyframes jump {
  0%,
  100% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(100px);
  }
}
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Mario Jump Animation</h1>
    <div class="mario"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Mario Character Jump Animation using CSS and HTML. Good luck and happy coding !