CSS - Animation without JS?

Question

css

Good afternoon.
Please help!
Tell me how to make such an animation as in the screenshot on CSS without JS.
1) Initially, circle No. 1 is displayed on the page, as in the "First Figure" of the screen.
2) When the page is fully loaded (or after 1-3 seconds, after loading) because of circle No. 1, ROLL OUT (just roll out) - circles No. 2 and No. 3 in different opposite directions.
Thank you.
PS I ask strictly - do not judge, this is my first question on the Toaster, if something is wrong, I ask generously - point out the oversight.
Thanks_2.
Guys - Thank you all!
Sergey Melnikov, although not quite according to the TK (in the part without -JS), but still - the
Solution !!! With ready-made JS code for "losier-junior", it's almost without it :)
Once again, THANK YOU - EVERYONE, for your responsiveness and participation!

Answer 1

https://codepen.io/anon/pen/rGMMbZ

Answer 2

Two animations via animation-delay. One for transform rotate, the second transform translateX

Answer 3

Нужно добавить класс после загрузки документа или всех картинок в любом случае, хотя возможно и можно через keyframes поставить задержку,  могу ошибаться. Но полную загрузку страницы там не отловишь на чистом css

<code lang="javascript">
document.addEventListener("DOMContentLoaded", function(event) {
    // тут добавить класс например к элементу, чтобы произошла анимация
  });
</code>

используйте @keyframes
https://developer.mozilla.org/ru/docs/Web/CSS/@keyframes

Answer 4

https://html5book.ru/css3-animation/

Answer 5

1) Andrew - Thank you!
2) ... but without JS only on CSS - how?
3) And the "plugging" is in the "rolling out" effect,
4) And only then in the "delay" effect.