How to realize this dot animation using CSS or JS?

Question

This GIF comes from dribbble.

I've tried to write a demo with pure CSS, here's part of my codes:

@keyframes circles{
  0%{
    transform: scale(0) rotate(150deg);
  }
  100%{
    transform: scale(1) rotate(0deg);
  }
}

They won't rotate as a whole.

The mixing animation at the center of the gif is not required, I just want to realize the rotating effect.

Hope someone can help me.

Answer 1

This is a compound or nested movement. The break down is:

• The dots themselves are just sliding along a straight line inwards and scaling a little bit as they travel
• Each dot's start time is offset slightly from the last so they appear to travel in sequence, which gives the illusion of a swirl.
• Finally, the dots would all be grouped under a parent element who's only job is to rotate.

Following this approach, you can easily apply simple translation and rotation animations to each element and still get this swirling effect.