*{
padding:0;
margin:0;
border: 1px solid blue;
}
#container{
margin: 10rem;
position:fixed;
}
.inner{
animation: animate-inner 5s linear infinite;
}
@keyframes animate-inner{
0%{
transform-origin: 20% 20%;
transform: rotate(0);
}
100%{
transform-origin: 20% 20%;
transform: rotate(360deg);
}
}
.inner2{
animation: animate-inner2 7s linear infinite;
}
@keyframes animate-inner2{
0%{
transform-origin: 50% 50%;
transform: rotate(0);
}
100%{
transform-origin: 50% 50%;
transform: rotate(180deg);
}
}<div id="container">
<svg height = "500" width="500">
<circle class="outer" cx="100" cy="100" r = "100"/>
<circle class="inner" cx="93.5" cy="12.5" r = "12.5" fill="red"/>
<circle class="outer" cx="400" cy="100" r = "100"/>
<circle class="inner2" cx="393.5" cy="13.5" r = "12.5" fill="red"/>
</svg>
</div>Need guidance on utilizing the transform-origin property in CSS. Despite reading MDN, there's confusion regarding its application in this scenario. Seeking advice for making the inner circle revolve around both outer circles simultaneously. Any assistance is appreciated.