Moon Rotating around Earth CSS Animation

CSS animation is a technique by which you can add some effects to various elements of your website. CSS animation is a game changer for those just starting out in web design. It is a creative tool of web design through which you can showcase your skills and present your website in a unique way from other websites. In today's blog, we will share a simple yet interesting CSS snippet. Today we will do the moon's rotation around the earth animation. Everything you need to do to create this snippet is detailed in the video tutorial below. Subscribe to our YouTube channel if you like the content.

Video tutorial:

We assume you have seen the video. CSS animations not only make a design look beautiful but also make a website more lively and interactive. Also, CSS animations added to the website also help to attract the attention of the users. Those practicing web design can create beautiful CSS animations without using complex code like JavaScript. Since the advent of CSS3, many complex JavaScript animations can now be created with CSS.

In our CSS animation snippet, we created a moon-earth rotation animation using CSS keyframe animation. To give a star effect around, I took four divs and spread them around with the CSS position attribute. Separate animation properties are set for star moon and earth animation. This 2D rotation animation of the Earth and Moon uses CSS transform translate and rotate functions. Opacity is used for the twinkling star effect. You can understand how this complete animation is done by watching the video tutorial above.

You May also like:

Moon Rotating around Earth CSS Animation [ Source Code ]:

Create CSS and HTML files and paste the following code into your files. Save the code and check it in the browser. If the code is not working properly or you face any other problem then download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css Rotating moon around earth Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="earth"></div>
        <div class="moon"></div>
        <!-- Generate more random stars if you want-->
        <div class="star" style="top: 10%; left: 20%;"></div>
        <div class="star" style="top: 40%; left: 70%;"></div>
        <div class="star" style="top: 60%; left: 30%;"></div>
        <div class="star" style="top: 80%; left: 80%;"></div>
    </div>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	overflow: hidden;
}
.wrapper {
	width: 100vw;
	height: 100vh;
	background-color: #000;
	position: relative;
}
.earth {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: url('earth.png');
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: ani-3 15s linear infinite;
}
.moon {
	width: 60px;
	height: 60px;
	background: url('moon.png');
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	animation: ani-1 7s linear infinite;
}
.star {
	width: 5px;
	height: 5px;
	background-color: #fff;
	position: absolute;
	animation: ani-2 2s linear infinite;
}
@keyframes ani-3 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@keyframes ani-1 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg) translateX(100px) rotate(-360deg);
	}
}
@keyframes ani-2 {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

Hope the snippet is working fine in your browser. Our website has full Bootstrap 5 Website Design, JavaScript Projects, Background Animation, Slider, CSS Flexbox, Footer Design, Responsive Web Design, Testimonial Slider and many more snippets. To get them you need to click on the Load More button below our website homepage. Don't forget to share our website content if you like it. Your support will encourage us to do better things in the future. Thank you very much for visiting our website.

DOWNLOAD CODE

Video tutorial:

Moon Rotating around Earth CSS Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Moon Rotating around Earth CSS Animation

Video tutorial:

Moon Rotating around Earth CSS Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form