Frontend Forever App

We have a mobile app for you to download and use. And you can unlock many features in the app.

Get it now
Intall Later

Michael Jackson Moonwalk Animation

About this Code

       Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Michael Jackson Moonwalk Animation . If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.


They are simple to use and don't even require JavaScript knowledge to make simple animations. Names the @keyframes at-rule that describes the keyframes for the animation. Sets the time it should take for one cycle of an animation to finish.

HTML components can be animated without JavaScript or Flash thanks to CSS! Transitions from one CSS style configuration to another can be animated using CSS animations. Animations are made up of two parts: a style that describes the CSS animation and a series of keyframes that show the style's beginning and ending states and any potential middle points.

CSS animations provide three major advantages over conventional script-driven animation methods:
Even with a moderate system load, the animations function properly. In JavaScript, simple animations frequently don't work well. To maintain the performance as smoothly as possible, the rendering engine can use frame-skipping and other methods.

The following are the animation property's sub-properties:

         By generating acceleration curves, one can set the time of the animation, or the manner in which it moves between keyframes.

         Sets the amount of time to wait before the animation sequence starts once the element has been loaded.

         Specifies how many times the animation should repeat; if you enter infinite, it will go on forever.

         Sets whether the animation should change direction on each pass through the sequence, or if it should stop at the beginning and repeat itself.

          Sets the values that the animation will apply both before and after it runs.

          Allows you to stop and start the animation.

  1.  Create a folder and name it Jackson
  2.  Next, Download the background image and the moonwalking Gif file.
  3.  Then, move the downloaded images towards to Jackson Folder.
  5.  Within this Create two files, one for the HTML file and the other one is for CSS.
  6.  Name the HTML file as Moonwalk.html.
  7.  As usual, Start coding from the tag.
  8.  Now link the style file towards to this html file by typing


These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Leave a Comment

You need to login first to comment.