CSS Animations That Leverage the Parent-Child Relationship | CSS-Tricks

"Modern CSS has great ways to position and move a group of elements relative to each other, such as anchor positioning. That said, there are instances where it may be better to take up the old ways for a little animation, saving time and effort. We've always been able to affect an element's structure, like resizing and rotating it. And when we change an element's intrinsic sizing, its children are affected, too. This is something we can use to our advantage."

"As far as rotating things, there are two options. We can (1) animate the <main> parent container, or (2) animate each .circle individually. Tackling that first option is probably best because animating each .circle requires defining and setting several animations rather than a single animation. Before we do that, we ought to make sure that each .circle is contained in the <main> element and then absolutely position each one inside of it:"

Modern CSS provides features like anchor positioning for moving groups of elements, but straightforward parent-level animations can save time for small interaction effects. Changing a container's width or applying transforms to the parent affects all absolutely positioned children, enabling coordinated motion without per-child keyframes. For a set of overlapping circles, wrap each circle as absolutely positioned children inside a positioned <main> container. Apply a single .animate class to the container that transitions width and transform (for example, rotate) to move the children together, and trigger that class change from JavaScript for a simple play interaction.

Read at CSS-Tricks