.outer-circle {
display: inline-block;
width:300px;
height: 300px;
margin: 50px auto;
text-align: center;
border-radius: 100%;
background: palegoldenrod;
position: relative;
}
.circle1 {
width: 50px;
height: 50px;
line-height: 50px;
background: cadetblue;
border-radius: 100%;
position: absolute;
top:50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
animation: rotate1 5s infinite linear;
/* transform: translate(0,-150px); */
}
.circle2 {
width: 40px;
height: 40px;
line-height: 40px;
background: yellowgreen;
border-radius: 100%;
position: absolute;
top:50%;
left: 50%;
margin-left: -20px;
margin-top: -20px;
animation: rotate2 3s infinite linear;
/* transform: translate(150px, 0); */
}
@keyframes rotate1 {
from {
transform: rotate(0turn) translate(0,-150px) rotate(1turn)
}
to {
transform: rotate(1turn) translate(0,-150px) rotate(0turn)
}
}
@keyframes rotate2 {
from {
transform: rotate(0turn) translate(150px, 0) rotate(1turn)
}
to {
transform: rotate(1turn) translate(150px, 0) rotate(0turn)
}
}