← All elements
<div class="ss"><b class="sun"></b><i class="o o1"><u></u></i><i class="o o2"><u></u></i><i class="o o3"><u></u></i></div>About this animation
A small solar system where planets circle a glowing sun, each on its own rotating ring with a different duration.
How it works
Each planet sits at the top of its own circular ring, and every ring is rotated by a keyframe at a different speed. Rotating the whole ring carries the planet around the sun in a circle. The inner planet has the shortest duration and the outer one the longest, as in a real orbit.
Ways to customise it
- Change each planet colour in its own rule.
- Edit the animation durations of 3s, 6s and 10s.
- Add a ring with a new inset value for another planet.
Good to know
Decorative only, and the rings stop under reduced motion. Only rotation is animated, so it stays smooth.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.