Как предотвратить возврат анимации CSS в исходное положение?

Итак, мой CSS перемещает div в -40px через 3 секунды. После этого div возвращается в исходное положение. Вот код:

#jsAlert {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    animation:mymove 3s;
    animation-delay: 3s;

    /*Safari and Chrome*/
    -webkit-animation: mymove 2s;
    -webkit-animation-delay: 2s;
}

@keyframes mymove {
    from {top: 0px;}
    to {top: -40px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {top: 0px;}
    to {top: -40px;}
}

Как я могу помешать div вернуться в исходное положение?

6
css css-animations css3 html

2 ответов

вам нужно использовать animation-fill-mode со значением forwards

Из Сети Разработчиков Mozilla:

цель сохранит вычисленные значения, заданные последним ключевым кадром встречается во время выполнения. Последний встреченный ключевой кадр зависит от значение animation-direction и animation-iteration-count

демо

18

Я бы не рекомендовал использовать @keyframes для этой простой анимации.

эта статья может помочь вам

http://www.kirupa.com/html5/css3_animations_vs_transitions.htm

вывод там у вас есть-откровенный взгляд на то, что делает переходы и анимации похожие, но очень разные. Мой общий подход к определение того, когда использовать, который идет так:

Если то, что я хочу, требует гибкости обеспечивается наличием нескольких ключевые кадры и легкий цикл, затем я иду с анимацией. Если я в поисках простой анимации из/В, Я иду с переходом. если я хотите управлять значениями свойств, которые я хочу анимировать, используя JavaScript, я иду с переходом.

потому что производительность-ценная вещь .

1