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.
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.
You May Like These:
Bootstrap 5 Landing Page Design
Logo Slider using HTML CSS
Bootstrap 5 Slider with Text Animation
Bootstrap Carousel With Thumbnails
In our CSS animation snippet, we created a moon-earth rotation animation using CSS keyframe animation. To give a star effect, 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.
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;
}
}
For the original blog post
Download code with Images
Top comments (0)