Come realizzare questa animazione punto usando CSS o JS?

Question

Questa GIF viene da dribbble.

Ho cercato di scrivere un demo con CSS puro, ecco una parte dei miei codici:

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

Non ruoteranno nel suo complesso.

L'animazione di missaggio al centro della gif non è necessaria, voglio solo realizzare l'effetto rotante.

Spero che qualcuno possa aiutarmi.

Answer 1

Questo è un movimento composto o nidificato. La ripartizione è:

• I puntini stessi sono solo scorrevoli lungo una linea retta verso l'interno e di scala un po 'mentre viaggiano
• ora di inizio di ogni punto è spostato un po' dall'ultima in modo che appaiano a viaggiare in sequenza , che dà l'illusione di un vortice.
• Infine, i punti sono tutti raggruppati sotto un elemento genitore, il cui unico lavoro è la rotazione.

Seguendo questo approccio, è possibile applicare facilmente le animazioni di traslazione e rotazione semplici a ciascun elemento e ottenere ancora questo effetto vorticoso.

Answer 2

Questo è un po 'tardi, ma qui è la mia jsfiddle seguente @ risposta di Soviut

https://jsfiddle.net/hfpymtba/

L'animazione 'spin' viene applicato al contenitore

@keyframes spin{ 
    0%{ 
    transform: rotate(0deg); 
    } 
    100%{ 
    transform: rotate(360deg); 
    } 
} 

L'animazione 'gravitone' viene applicato alle classi di cerchi

@keyframes graviton{ 
    100%{ 
    top:50%; 
    left:50%; 
    } 
} 

Là è un po 'di oscillazione poiché i cerchi non sono perfettamente intorno al centro del contenitore.