I want to rotate the ball inside the circle so it touches every corner of the bigger circle and animation continuous infinitely as it is a logo animation.
body {
background-color: #272727;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.line {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
}
.circle {
width: 82px;
height: 82px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 4px;
top: 18px;
animation: rotate 5s linear infinite;
transform-origin: 50px 50px;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}<div class="line">
<div class="circle"></div>
</div>I implemented the code but im confused how to rotate the smaller ball through transform-origin property so that its rotate inside the bigger circle and does not come out of the bigger circle.
>Solution :
You can just remove this CSS code line animation: rotate 5s linear infinite; from the .circle class and add to the .line class in your CSS code. You will achieve the animation that you want.
body {
background-color: #272727;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.line {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
animation: rotate 5s linear infinite;
}
.circle {
width: 82px;
height: 82px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 4px;
top: 18px;
transform-origin: 50px 50px;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}<div class="line">
<div class="circle"></div>
</div>Cheers!!!