Как предотвратить запуск анимации ключевого кадра css при загрузке страницы?

Решение 1-Добавление анимации при первом наведении

вероятно, лучший вариант - не ставить анимацию вниз, пока пользователь не завис над container впервые.

это включает в себя прослушивание mouseover событие затем добавляет класс с анимацией в этот момент и удаляет прослушиватель событий. Основным (потенциальным) недостатком этого является то, что он полагается на Яваскрипт.

;(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>

решение 2-воспроизведение анимации скрыто

другой способ обойти это-изначально скрыть элемент, убедиться, что анимация воспроизводится, пока она скрыта, а затем сделать ее видимой. Недостатком этого является то, что время может быть немного выключено, и оно становится видимым слишком рано, а также наведение не доступно сразу.

для этого требуется некоторый Javascript, который ждет для длины анимации и только потом делает #content видны. Это означает, что вам также нужно установить начальное opacity to 0 поэтому он не отображается при загрузке, а также удаляет visibility от ключевых кадров-они все равно ничего не делают:

// 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>

решение 3 - использовать переходы

в вашем сценарии вы можете сделать этот CSS только путем замены keyframeС transition вместо, Итак, это начинается с opacity:0 и просто наведение имеет изменение в opacity и 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>