CSS Keyframe animation: Hiding element before animation starts
css, css-animations, jquery
Solution
You are close. An easy way is to just add `animation-fill-mode: forwards;` which will persist the last keyframe and in this case keep the div visible.
Here's an updated version of your Fiddle where the animation starts after 4s (as you specified) and keeps the div visible instead of jumping back to it's original state (`opacity: 0;`).
Hope that helps!
Problem
Is there a CSS way to hide an element and fading it in with a keyframe-animation after x seconds? Or do I need JavaScript/jQuery for that? How to do it? At the moment, it is also show before the animation starts and if I set `opacity: 0;`, the animation jumps back to that value after the animation is complete. Fiddle