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.

WHAT IS CSS ANIMATION?

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:

animation-timing-function

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

animation-delay

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

animation-iteration-count

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

animation-direction

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

animation-fill-mode

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

animation-play-state

Allows you to stop and start the animation.

STEPS TO CREATE:

Create a folder and name it Jackson
Next, Download the background image and the moonwalking Gif file.
Then, move the downloaded images towards to Jackson Folder.
Now, Open your IDE as VISUAL STUDIO CODE or SUBLIME TEXT or ANY OTHER.
Within this Create two files, one for the HTML file and the other one is for CSS.
Name the HTML file as Moonwalk.html.
As usual, Start coding from the tag.
Now link the style file towards to this html file by typing

Images

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.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
	margin:0;
	padding: 0;
}
.container{
	width: 1366px;
	height: 657px;
	position: relative;
	background-image: url("https://www.frontendforever.com/uploads/assets/1.jpg");
	background-size: cover;
	animation: animate 500s linear infinite;
}
@keyframes animate{
	0%
	{
				
	}
	50%{
		background-position: 10000px;
	}
	100%{
		background-position: 10000px;
	}
}
.road{
	width: 1330px;
	height: 130px;
	background: black;
	position: absolute;
	top:75%;
	left: 0%;
	transform-origin: bottom;
	transform-style: preserve-3d;
	transform: perspective(200px) rotateX(20deg);	
}
.road:before{
	content: '';
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	left: 0;
	width: 100%;
	height: 10px;
	background: linear-gradient(90deg,white 0%,white 70%,black 70%,black 100%);
	background-size: 200px;
	animation: road 5s linear infinite; 
}
@keyframes road{
	0%{
		background-position: 0px;
	}
	100%{
		background-position: 200px;
	}
}
.road:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 30px;
	background: black;
	bottom: -30px;
	transform-origin: top;
	transform: perspective(1200px) rotateX(-20deg);
}
.container img{
	position: absolute;
	height: 300px;
	top:50%;
	right: 0%;
	animation: moonwalk 10s linear infinite;
}
@keyframes moonwalk{
	0%{

}
	100%{
		transform: translateX(-1000px);
	}
}	
audio{
	outline: none;
	display: none;
}

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.

Download

Try It

Frontend Forever