Comment empêcher l'animation d'images clés CSS de s'exécuter lors du chargement de la page?

Solution 1-Ajouter une animation sur le premier survol

La meilleure option est probablement de ne pas mettre l'animation jusqu'à ce que l'utilisateur ait survolé le container pour la première fois.

Cela implique d'écouter l'événement mouseover, puis d'ajouter une classe avec l'animation à ce stade, et de supprimer l'écouteur d'événement. Le principal inconvénient (potentiel) de ceci est qu'il repose sur Javascript.

;(function(){
    var c = document.getElementById('container');
    function addAnim() {
        c.classList.add('animated')
        // remove the listener, no longer needed
        c.removeEventListener('mouseover', addAnim);
    };

    // listen to mouseover for the container
    c.addEventListener('mouseover', addAnim);
})();

#container {
    position:relative;
    width:100px;
    height:100px;
    border-style:inset;
}
#content {
    position:absolute;
    top:100px;
    width:100%;
    height:100%;
    background-color:lightgreen;
    opacity:0;
}

/* This gets added on first mouseover */
#container.animated #content {
    -webkit-animation:animDown 1s ease;
}

#container:hover #content {
    -webkit-animation:animUp 1s ease;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes animUp {
    0% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
    100% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
}
@-webkit-keyframes animDown {
    0% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
    100% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
}

<div id="container">
    <div id="content"></div>
</div>

Solution 2 - jouer animation cachée

Une autre façon de contourner ce problème est de masquer initialement l'élément, de s'assurer que l'animation joue pendant qu'elle est cachée, puis de la rendre visible. L'inconvénient de ceci est que le timing pourrait être légèrement désactivé et il est rendu visible trop tôt, et aussi le vol stationnaire n'est pas disponible tout de suite.

Cela nécessite du Javascript qui attend la longueur de l'animation et ne fait que rendre #content visible. Cela signifie que vous devez également définir le opacity initial à 0 ainsi il n'apparaît pas en charge et supprime également le visibility des images clés - celles-ci ne font rien de toute façon:

// wait for the animation length, plus a bit, then make the element visible
window.setTimeout(function() {
    document.getElementById('content').style.visibility = 'visible';
}, 1100);

#container {
    position:relative;
    width:100px;
    height:100px;
    border-style:inset;
}

#content {
    visibility:hidden;
    -webkit-animation:animDown 1s ease;
    position:absolute;
    top:100px;
    width:100%;
    height:100%;
    background-color:lightgreen;
    opacity:0;
}

#container:hover #content {
    -webkit-animation:animUp 1s ease;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes animUp {
    0% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
    100% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
}

@-webkit-keyframes animDown {
    0% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
    100% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
}

<div id="container">
    <div id="content"></div>
</div>

Solution 3 - Utiliser les transitions

Dans votre scénario, vous pouvez faire ce CSS uniquement en remplaçant les keyframe s par un transition à la place, donc il commence par opacity:0 et juste le hover a un changement dans opacity et le transform:

#container {
    position:relative;
    width:100px;
    height:100px;
    border-style:inset;
}

#content {
    position:absolute;
    top:100px;
    width:100%;
    height:100%;
    background-color:lightgreen;

    /* initial state - hidden */
    opacity:0;
    /* set properties to animate - applies to hover and revert */
    transition:opacity 1s, transform 1s;
}

#container:hover #content {
    /* Just set properties to change - no need to change visibility */
    opacity:1;
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
}

<div id="container">
    <div id="content"></div>
</div>