Как задать задержку появления элементов на странице с помощью CSS?

Question

[Никита Кит]

есть на странице блок, появление которого я хочу задать через 2 секунды после загрузки.
Кейфрейм делает своё дело, но после проигрывания анимации элемент снова исчезает. Если задать элементу в свойствах строгий opacity 1, то он появляется на странице сразу после прогрузки, потом после значения animation-delay проигрывается анимация появления.
Можно ли сделать так, чтоб он, после проигрывания анимации, принимал значение opacity 1, а до - opacity 0. Или придётся прибегать к джедайской силе setTimeout?

Comments

[Nikolay Talanov]

animation-fill-mode: forwards;

[Никита Кит]

Nikolay Talanov: спасибо. даже не знал что в anmation есть такой классный property, круто))))

Answer 1

[Алексей Струков]

Можно сделать через animation-fill-mode: both

Answer 2

[Сергей Софьичев]

scrollReveal.js очень даже + прост

Comments

[Никита Кит]

не люблю скрипты применять, но обязательно ознакомлюсь, спасибо)