Как сделать запуск анимации только после загрузки страницы?

Question

[Роман Тузов]

Имеется анимация на keyframes

@keyframes fadeUp {
	0% {
		transform: translateY(4rem);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

Она прикреплена к элементу следующим образом: animation: fadeUp .8s forwards;
Как сделать, чтобы эта анимация запускалась не в процессе загрузки страницы(т.к. у меня имеется прелоадер), а после полной загрузки всего.

Comments

[Виталий Першин]

запускать анимацию после прелоадера... а как именно, зависит от того, как реализован прелоадер...

[Роман Тузов]

Виталий, да с прелоадером ничего сложного

$(window).on('load', function() {
	$(".loader").fadeOut(); 
	$("#preloder").delay(400).fadeOut("slow");

});

<div id="preloder">
		<div class="loader"></div>
	</div>

[Виталий Першин]

Ну вот после $("#preloder").delay(400).fadeOut("slow"); можно добавить к примеру:

$('.Анимируемый_элемент').addClass('Класс_с_анимацей');

Answer 1

[Петр]

Посмотрите в сторону события Load.

Answer 2

[Денис Инешин]

Без JS не обойтись. Самая простая вещь которую вы можете сделать - добавить на body класс ready и привязать анимацию к нему. Пример:
https://jsfiddle.net/IonDen/j0fzvL7c/

Comments

[Роман Тузов]

Что я не так сделал? Почему-то так же работает до загрузки

document.addEventListener('DOMContentLoaded', function() {
	document.body.classList.add('ready');
});

.about-details h2 {
	opacity: 0;
}
.ready .about-details h2 {
	animation: fadeUp .5s forwards;
	animation-delay: .8s;
}

[Денис Инешин]

Hutson, DOMContentLoaded сработает когда будет загружен весь DOM но не все картинки. Выможете поменять DOMContentLoaded на load тогда запустится после загрузки вообще всего.

[Роман Тузов]

Денис Инешин, https://jsfiddle.net/mofa1dy4/ Всё равно почему-то не появляется, возможно, я просто сильно туплю ночью

[Денис Инешин]

Hutson, `load` нужно весить на `window`, а не на `document`