How to delay the appearance of elements on the page using CSS?

Question

css

there is a block on the page, the appearance of which I want to set 2 seconds after loading.
The keyframe does its job, but after the animation plays, the element disappears again. If you set a strict opacity 1 to an element in its properties, then it appears on the page immediately after loading, then after the animation-delay value, the appearance animation is played.
Is it possible to make it take the value opacity 1 after the animation is played, and before - opacity 0. Or will I have to resort to the Jedi power of setTimeout?

Answer 1

Can be done via animation-fill-mode: both

Answer 2

scrollReveal.js is very + simple