So I am just a beginner and I am just trying to figure out animations and how they work.
My plan is to move the ball infinitenly in an infinite number of degrees (lets say 90) on a line. Here are a couple of problems I wondered:
Is there a better way to use classes that have common and slightly different rules (having different rotations) ?
How can I have the ball movement on the new lines having different rotations?
.line,
.line-deg90 {
background-color: hsl(0, 0%, 0%);
height: 3px;
width: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: 0 0 0 -200px;
transform-origin: 50%;
}
.line-deg90 {
transform: rotate(90deg);
}
.ball {
background-color: hsl(0, 0%, 0%);
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
top: -15px;
left: 0;
animation: move 2s infinite alternate ease-in-out;
}
#keyframes move {
0% {
left: 0px;
top: -15px;
}
100% {
left: 370px;
top: -15px;
}
<div class="line">
<div class="ball"></div>
<div class="line-deg90"></div>
Here is an idea using CSS variables to have a generic code. Simply adjust the angle and the offset to control the movement
.ball {
--angle: 0deg;
--offset: 150px;
background-color: hsl(0, 0%, 0%);
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
inset: 0;
margin: auto;
animation: move 2s infinite alternate ease-in-out;
}
#keyframes move {
0% {
transform: rotate(var(--angle)) translate(var(--offset))
}
100% {
transform: rotate(var(--angle)) translate(calc(-1*var(--offset)))
}
}
html {
min-height:100%;
background:
linear-gradient(red 0 0) center/100% 2px,
linear-gradient(red 0 0) center/2px 100%;
background-repeat:no-repeat;
}
<div class="ball"></div>
<div class="ball" style="--angle:90deg;--offset:100px"></div>
Related
here is the shape i want to do enter link description here
P.S.I am still learning the front-end stuff so could you pls help me with this assignment.
Here is the HTML code <div>Elzero</div>
here is the CSS code i tried to do with
* {
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: #eee;
margin: 80px auto;
color: black;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 200px;
border-radius: 50%;
}
::after {
content: "";
width: 200px;
height: 200px;
background-color: #03a9f4;
margin: 80px auto;
border-radius: 50%;
position: absolute;
transform: translate(-190px, -80px);
z-index: -1;
}
::before {
content: "";
width: 200px;
height: 200px;
background-color: #e91e63;
margin: 80px auto;
border-radius: 50%;
position: absolute;
top: 0px;
z-index: -2;
}
div:hover {
transition: all 0.5s;
transform: rotate(180deg);
}
As you are constrained to use just one div, this snippet builds on your idea of having the pseudo elements but creating them with conic-gradient backgrounds and the 'main' div having the light gray circular background created using a radial gradient. That way it creates these 3 shapes.
and overlays them to give the impression of 3/4 circles. It then uses CSS animation to rotate them on hover.
Obviously you will want to play with the dimensions, the animations timings and directions to get exactly what you want but this should give a start.
* {
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-image: radial-gradient(#eee 0 55%, transparent 55% 100%);
margin: 80px auto;
color: black;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 200px;
border-radius: 50%;
position: relative;
}
div::after {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -2;
background-image: conic-gradient(#03a9f4 0deg 45deg, white 45deg 135deg, #03a9f4 135deg 360deg);
}
div::before {
content: "";
width: calc(100% - 10%);
height: calc(100% - 10%);
position: absolute;
border-radius: 50%;
position: absolute;
top: 5%;
left: 5%;
z-index: -1;
background-image: conic-gradient(#e91e63 0, #e91e63 225deg, white 225deg, white 315deg, #e91e63 315deg, #e91e63 360deg);
}
div:hover::after {
animation: rot .4s linear;
}
div:hover::before {
animation: rot .4s linear;
animation-delay: .1s;
animation-direction: reverse;
}
#keyframes rot {
0% {
transform: rotate(0);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(0);
}
100% {}
}
<div>Elzero
</div>
also here is example in less:
https://codepen.io/nikitahl/pen/XooBXd
if you want to use css here is a converter:
https://jsonformatter.org/less-to-css
I'm making a HTML program where I want to have two circles traveling on a circular path, in opposite directions. That's the main idea. Here's my code so far (I followed this tutorial on circular movement coding, and stopped right at 8:35 when it's just the red circle in motion):
styles.css:
body{
margin: 0;
padding: 0;
}
.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line{
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Two Circles in Circular Motion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "circle">
<div class = "line"></div>
</div>
</body>
</html>
Right now I only have 1 circle. I want to create another one, and animate it so that it travels in the same circular path but in the opposite direction. I'm relatively new to CSS and HTML, so can someone please help? Thanks!
You can optimize your code and use only one div and its pseudo element for the small circles:
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid #262626;
/* place both item to the center */
display:grid;
align-content:center;
justify-content:center;
}
.circle::before,
.circle::after {
content: '';
grid-area:1/1; /* both will overlap */
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
transform:rotate(0deg) translate(200px) rotate(0deg);
animation:animate 2s linear infinite;
}
.circle::after {
animation-direction:reverse; /* the opposite animation for the after */
background:blue;
}
#keyframes animate {
100% {transform:rotate(360deg) translate(200px) rotate(-360deg);}
}
<div class="circle">
</div>
Another solution is you could have made another line and used
animation-direction: reverse; on it.
Example;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line, .line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
.line2 {
animation-direction: reverse;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
You also could have created another line (like I did in my example (line2)), and bound a different animation keyframe to it like below;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate2 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
There are many possibilities to achieve what you are looking for :)
Because you say you are new to HTML and CSS I figured I'd show you some alternatives.
I am trying to recreate this gif using HTML and CSS, but this is where I got stuck. Here is the gif:
https://www.link-elearning.com/linkdl/coursefiles/1452/ADCSS9_assigment_animation1.gif
This is what I have done so far but I am stuck:
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
padding-top: 2px;
height: 300px;
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
background: rgb(32, 6, 146)
}
#keyframes scaleIn {
from {
transform: scale(.5, .5);
opacity: .5;
}
to {
transform: scale(2.5, 2.5);
opacity: 0;
}
}
</style>
</head>
<body style="background-color:#050210;">
<div class="circle" style="animation-delay: -2s"></div>
<div class="circle" style="animation-delay: -1s"></div>
<div class="circle" style="animation-delay: -0"></div>
</body>
</html>
One method to get the rainbow coloured outlined is to use another div that sits behind the darker inner divs. This rainbow coloured outline can be achieved by using a linear-gradient. All the CSS animations are set to infinite to allow them to run repeatedly. Here I used some CSS variables to set the sizes of the circles indicated by -- in front of the variable name. It's good to note that it might be a good idea to put this in a wrapper/container div instead of the absolute positioning I have below. The pulsing in the centre could also use some adjustments. Press the Run code snippet button below to see the results:
body {
background: rgba(6, 2, 20, 1);
}
#Blurry_Rainbow_Circle {
position: absolute;
--Circle_Diameter: 200px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: linear-gradient(139.84deg, #A692ED 14.35%, #6CECAD 45.6%, #D87EAA 82.79%);
animation: Rotate 0.8s linear infinite;
filter: blur(20px);
}
#Rainbow_Circle {
position: absolute;
--Circle_Diameter: 200px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: linear-gradient(139.84deg, #A692ED 14.35%, #6CECAD 45.6%, #D87EAA 82.79%);
animation: Rotate 0.8s linear infinite;
}
#Large_Circle {
position: absolute;
--Circle_Diameter: 175px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: rgba(6, 2, 20, 1);
}
#Medium_Circle {
position: absolute;
--Circle_Diameter: 10px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: rgba(19, 12, 49, 1);
animation: Grow 2s linear infinite;
}
#Small_Circle {
position: absolute;
--Circle_Diameter: 10px;
top: calc(50% - var(--Circle_Diameter)/2);
left: calc(50% - var(--Circle_Diameter)/2);
height: var(--Circle_Diameter);
width: var(--Circle_Diameter);
border-radius: calc(var(--Circle_Diameter)/2);
background: rgba(19, 12, 49, 1);
animation: Grow_2 2s linear infinite;
}
#keyframes Rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes Grow {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(17);
opacity: 0;
}
51% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#keyframes Grow_2 {
0% {
transform: scale(0);
opacity: 0;
}
40% {
transform: scale(0);
opacity: 0;
}
41% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(17);
opacity: 0;
}
}
<div id="Blurry_Rainbow_Circle"></div>
<div id="Rainbow_Circle"></div>
<div id="Large_Circle"></div>
<div id="Medium_Circle"></div>
<div id="Small_Circle"></div>
I dont know where u study.. but it is one hell of a study.... Itadakimas... Thanks for the meal... I loved working on it
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.body {
background-color: #050210;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.circle {
position: absolute;
height: 230px;
width: 230px;
border-radius: 50%;
background: rgb(32, 6, 146)
}
.animate {
transform: translate(-50%, -50%);
animation: scaleIn 1.9s infinite;
}
.border {
/* --b: 5px; */
/* border width*/
animation: rotate 3s infinite linear;
z-index: 0;
/* scale: 4.5; */
--b: 10px;
--c: linear-gradient(140deg, red, yellow, green);
background: transparent;
box-shadow: 5px 5px 19px #54aa00, -5px -5px 19px #ff5a00, -5px 5px 19px #f9e203, 5px -5px 19px #f9e203;
}
.border:after {
content: "";
display: inline-block;
padding-top: 100%;
}
.border:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--c, linear-gradient(to right, #9c20aa, #fb3570));
padding: var(--b);
border-radius: 50%;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
#keyframes scaleIn {
from {
transform: scale(.15, .15);
opacity: .5;
}
to {
transform: scale(1, 1);
opacity: 0;
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="body">
<div class="circle border"></div>
<div class="circle animate" style="animation-delay: -0.95s"></div>
<div class="circle animate" style="animation-delay: 0s"></div>
</div>
Whew,, Corrected all mistakes... didn't choose your color though
I'm trying to make a 'dot' orbit around another object (circle) but due to the z-index the dot always appears above the circle it is meant orbiting around.
CodePen link: https://codepen.io/moy/pen/ROVZXd?editors=1100
Ideally the 2nd half of the animation would take place behind the object so it's not seen until it comes out the other side - is that possible?
I thought about fading out the object that is moving around but I don't think that would give a smooth/masked effect?
A bit stuck as to how I'd mask this area as I can't see a way the CSS would know it's meant to be hidden. I thought maybe I could change the z-index 50% though the animation it and reset it at 0%/100% but that doesn't appear to do anything.
Any ideas? Thanks in advance!
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 30px auto;
position: relative;
width: 100px;
z-index: 20;
}
.orbit {
border: 2px #eee transparent;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
z-index: 10;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
z-index: 10;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg); z-index: 20;
}
50% {
z-index: -20;
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg); z-index: 20;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
I seem to have solved this by adding a negative z-index to an animation applied to the parent .orbit
Link: https://codepen.io/moy/pen/wZdpRw?editors=1100
I initially applied this at 50% through the animation as that should be the furthest away the dot is before it comes back behind the larger circle. However this didn't work, setting it on 100% did work. Not entirely sure why but it seems to work!
The initial issue was due to the fact that you are applying z-index to the parent element and doing so it will impossible to make the child to move behind it (Why elements with any z-index value can never cover its child?) thus changin z-index is useless
Even if you remove the z-index from the parent you still have the transform that is also creating a stacking context making impossible to the child element to move behind so you cannot make the .moon to move behind the .earth.
The only way to do it (like you already noticed) is to remove z-index from the .earth to avoid the earth creating a stacking context and animate z-index of orbit to make the orbit AND the moon moving behind the earth (not only the moon).
Add some coloration to better see this:
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 60px auto;
position: relative;
width: 100px;
}
.orbit {
animation: hide ease-in-out infinite;
animation-duration: 2s;
background:red;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg);
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg);
}
}
#keyframes hide {
0% {
z-index: 20;
}
100% {
z-index: -20;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
Now if you add back z-index to earth it will stop working because of the stacking context:
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 60px auto;
position: relative;
width: 100px;
z-index:2;
}
.orbit {
animation: hide ease-in-out infinite;
animation-duration: 2s;
background:red;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg);
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg);
}
}
#keyframes hide {
0% {
z-index: 20;
}
100% {
z-index: -20;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
You can try key-framing the opacity:
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 30px auto;
position: relative;
width: 100px;
z-index: 20;
}
.orbit {
border: 2px #eee transparent;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
z-index: 10;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
z-index: 10;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg); opacity: 1;
}
56% {
opacity: 1;
}
58% {
opacity: 0;
}
77% {
opacity: 0;
}
78% {
opacity: 1;
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg); opacity: 1;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
I am trying to create a pure CSS design of a sphere revolving(orbiting) around another sphere. Like a moon orbiting the sun to be precise. The image of the earth fits in properly into the sphere of earth. But the image of moon does not fit into the sphere of moon.
The image attached might help to understand my question better
Below is my CSS script
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
}
.center .earth {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
margin: 3em auto;
border-radius: 50%;
background-size: 630px;
animation: spin 30s linear alternate infinite;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;``
}
.center .earth .moon {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 200px;
height: 2px;
transform-origin: left;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
.center .earth .moon::before {
content: url(moon.jpg);
position: absolute;
top: -25px;
right: 0;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes spin {
100% {
background-position: 100%;
}
}
Make this change content: "";
to background-image: url(moon.jpg);
and remove background: #fff from classname .center .earth .moon::before
body {
background: black;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
}
.center .earth {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
margin: 3em auto;
border-radius: 50%;
background-size: 630px;
animation: spin 30s linear alternate infinite;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;``
}
.center .earth .moon {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 200px;
height: 2px;
transform-origin: left;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
.center .earth .moon::before {
content: "";
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsvjrANMGI8aBJSFbsHteVa04rcB1IjjNsbrhm8vTLflfpiG133g);
position: absolute;
top: -25px;
right: 0;
width: 50px;
height: 50px;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes spin {
100% {
background-position: 100%;
}
}
<div class="center">
<div class="earth">
<div class="moon">
</div>
</div>
</div>