CSS — Анимация без JS?

Question

[maxgeor]

Добрый день.
Прошу помощи!
Подскажите, как сделать такую анимацию как на скрине на CSS без JS.
1) Изначально на странице отображается круг № 1, как на "Первой Фигуре" скрина.
2) При полной загрузки страницы (или через 1-3 сек, после загрузки) из-за круга № 1, ВЫКАТЫВАЮТСЯ (именно выкатываются) - окружности № 2 и №3 в разные противоположные стороны.
Спасибо.
P.S Прошу строго - не судить, это мой первый вопрос на Тостере, если что не так прошу великодушно - указать на оплошность.
Спасибо_2.

Ребята - Всем Спасибо!
Сергей Мельников, хоть не совсем по ТЗ (в части без -JS), но все-таки -
Решение!!! С готовым кодом JS для "лузира-юниора", это почти что и без:)
Ещё раз СПАСИБО - ВСЕМ, за отзывчивость и участие!

Answer 1

[Сергей Мельников]

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

Answer 2

[Mikhail Osher]

Две анимации через animation-delay. Одна для transform rotate, вторая transform translateX

Comments

[maxgeor]

Михаил - Спасибо.
Пока не понятно, но я и прошу - "направление" для "развития"!
..., а там - Разберёмся!
Но - Вопрос, ....а окружности в Вашем варианте - "покатятся" или "выплывут" горизонтально?
Спасибо!

[Mikhail Osher]

rotate будет вращать, а translateX будет перемещать по оси X (кто бы мог подумать??)

[maxgeor]

Mihail....
...(кто бы мог подумать??),
....ну и планктон-же-же нужен для "баланса", или точнее - "контраста":)

Answer 3

[Andrey Perov]

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

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

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

Answer 4

[Thomas9]

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

Answer 5

[maxgeor]

1) Андрей - Спасибо!
2) ..., но без JS только на CSS - как?
3) И "затык" именно в эффекте "выкатывания",
4) И уже потом в эффекте - "задержка".

Comments

[Andrey Perov]

maxgeor я поправил свой ответ, при загрузке css можно через keyframes сделать анимацию, но отловить именно загрузку всего документа не получиться

[maxgeor]

Андрей, а при помощи CSS - transform....? такого эффекта "выкатывания" - можно добиться?

[Andrey Perov]

maxgeor да можно, на ваш выбор что использовать

[maxgeor]

Александр и Андрей - Спасибо