Menu
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
293
The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
backwards. When assigned animation-fill-mode: backwards, the target element will take the style values set by the first keyframe of the animation during the animation-delay period. animation-delay sets a time delay until an animation begins, and animation-fill-mode applies during this delay.
The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.
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!
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
