How To Prevent Css Keyframe Animation On Page Load?

I have some CSS animation with keyframes on my page for fadein/out elements. The problem is that the fadeout animations are shown when i load the page. HTML:

Solution 2:

I tried out different possibilities. Only one which was working was to hide it by JS using a timeout and absolute positioning.

Problem would be if the animation is longer than the set timeout. Or the animation needs to be shown before the timeout runs.

$('.box').css({
    'position': 'absolute',
    'top': '-9999px',
    'left': '-9999px'
});

setTimeout(function() {
    $('.box').css({
        'position': 'relative',
        'top': 'auto',
        'left': 'auto'
    });
}, 500);