I am animated some elements with keyframe animation. The animation is shifting opacity from 0 to 1:

@keyframes example {
0% { opacity: 0; }
10% { opacity: 0; }
11% { opacity: 1; }
12% { opacity: 0; }

Essentially a ‘flicker’ when run.

This works fine.

Now I want to apply this to a bunch of elements, each set with an animation delate so that they all flicker at different times (think of twinkling stars or the like).

The catch is that until the animation starts, you see the object. It’s not until after the animation delay that it then hides and starts looping the animation.

Is there a way, via just CSS, to hide an element until after an animation delay period ends?

Workarounds I can think of would be

• JS: set the animation delay via JS, add a settimeout to show the element set to the same time span as the animation delate.

• More CSS: create separate keyframes for every object (verbose, but maybe the best option?)

But before I give in to one of those, thought I’d ask if there’s a way to do this with CSS itself. Something ala “hide this element until the animation starts”.