Как сделать задержку запуска CSS анимации?

Question

[Unknown]

Привет!
Есть вот такой HTML:

<div class="circle_wrap">
						<h1>Hello<span>world</span>!</h1>
						<div class="hat " id="animation_c"></div>
						<div class="dp_circle " id="animation_a"></div>
						<div class="p_circle " id="animation_b"></div>
						<div class="lp_circle " id="animation_c"></div>
						</div>

и вот такой JS:

document.addEventListener("DOMContentLoaded", function(){
	setTimeout(ready, 2000);
	function ready() {
		document.getElementById('animation_a');
		document.getElementById('animation_b');
		document.getElementById('animation_c');
	}
}, false);

Конечно, он не работает
Что нужно:
Запустить CSS анимацию @keyframes после загрузки страницы (событие setTimeout здесь только для потому, что страница загружается, пока что, быстро и отследить правильно ли я все сделал без этого события не знаю как).

Comments

[Hyubert]

Что вы ожидаете от этого "кода"? Что через 2 секунды после загрузки будут найдены 3 елемента по id и сразу потрутся?

[Unknown]

Hyubert: ничего не ожидаю, я понимаю, что просто взял id элемента, я жду ответа на вопрос как

Запустить CSS анимацию @keyframes после загрузки страницы

, а код js здесь просто так для красоты (для гурманов)

[Hyubert]

Richswitch: задайте в css отдельный стиль с animation, а js-сом добавляйте жтот клас в теле вашего кода.

[Евгений Вольф]

Отслеживать загрузку страницы Вы можете с помощью того же JS'а, по завершению загрузки, например, добавляя класс к нужному элементу. А сама задержка анимации делается через animation-delay

[Евгений Вольф]

ну... или можно вставить стили с анимацией в самый конец, над </body> (там, куда обычно пихают JS). Тогда, по идее она отсчёт задержки должен начаться после того, как этот самый CSS будет загружен, после загрузки DOM-дерева, соотв.

[Unknown]

Евгений Вольф: Hyubert: Спасибо за ответы, не буду страдать, просто добавлю класс в дом после загрузки страницы

Answer 1

[twobomb]

Ну так можно