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

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

Ребята - Всем Спасибо!
Сергей Мельников, хоть не совсем по ТЗ (в части без -JS), но все-таки -
Решение!!! С готовым кодом JS для "лузира-юниора", это почти что и без:)
Ещё раз СПАСИБО - ВСЕМ, за отзывчивость и участие!
  • Вопрос задан
  • 696 просмотров
Решения вопроса 1
mlnkv
@mlnkv
JavaScript Developer
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
miraage
@miraage
Старый прогер
Две анимации через animation-delay. Одна для transform rotate, вторая transform translateX
Ответ написан
SnaIP
@SnaIP
Front-end разработчик
Нужно добавить класс после загрузки документа или всех картинок в любом случае, хотя возможно и можно через keyframes поставить задержку,  могу ошибаться. Но полную загрузку страницы там не отловишь на чистом css

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

используйте @keyframes
https://developer.mozilla.org/ru/docs/Web/CSS/@keyframes
Ответ написан
Комментировать
@Thomas9
Ответ написан
Комментировать
maxgeor
@maxgeor Автор вопроса
1) Андрей - Спасибо!
2) ..., но без JS только на CSS - как?
3) И "затык" именно в эффекте "выкатывания",
4) И уже потом в эффекте - "задержка".
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы