Невозможно остановить анимацию в конце одного цикла

Я делаю анимацию CSS за минуту, и в ней я перемещаю вещи и хочу, чтобы она оставалась в конечной позиции, пока пользователь не отталкивает свою мышь.

body {
    background: url('osx.jpg');
    padding: 0;
    margin: 0;
    line-height: 60px;
}

@-webkit-keyframes item1 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    }

@-webkit-keyframes item2 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
    100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
}

@-webkit-keyframes item3 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
    100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
}

    div {
    position: relative;
    }
#folder {
    width: 120px;
    margin: 0px auto;
}

#folder > div {
    position: absolute; 
}

#folder:hover > div:nth-of-type(1) {
    -webkit-animation-name: item1;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(2) {
    -webkit-animation-name: item2;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(3) {
    -webkit-animation-name: item3;
    -webkit-animation-duration: 10s;
}

Всякий раз, когда анимация заканчивается, она просто повторяется. Я только хочу, чтобы это случилось однажды и оставалось там, где оно находится, пока пользователь не уйдет. Я попытался использовать приостановленную вещь из спецификации, но она не работает, как я ожидал. Любая помощь приветствуется. Благодарю.:)

Ответы

Ответ 1

Следующий комментарий работал у меня. Спасибо michael

"Вам нужно добавить режим заполнения, чтобы заморозить состояние анимации в конце анимации.

-webkit-animation-fill-mode: forwards;

forwards оставляет анимацию в состоянии последнего кадра

backwards оставляет анимацию в начале

Ответ 2

На всякий случай, когда ваша анимация все еще сбрасывается в первый кадр, будьте осторожны с порядком, в котором вы объявляете css:

Это нормально работает:

    animation: yourAnimationName 1s;
    animation-fill-mode: forwards;

Это не будет (reset для первого кадра):

    animation-fill-mode: forwards;
    animation: yourAnimationName 1s;

Tricky!

Ответ 3

Если я правильно понял вопрос, похоже, вам нужно установить итерацию в '1'.

-webkit-animation-iteration-count: 1;

Ответ 4

анимация css3 reset для стиля по умолчанию в конце анимации. Вы можете попробовать что-то с javascript:

Вы можете добавить eventListener в свою анимацию, получить стили, которые хотите сохранить, применить их вручную и удалить анимацию.

document.getElementById('yourdiv').addEventListener(
    'webkitAnimationEnd',
    function(){
        document.getElementById('yourdiv').style.backgroundPosition = '0px 0px';
        document.getElementById('yourdiv').style.webkitAnimationName = 'none';
    }, 
    false
);

Ответ 5

попробуйте следующее:

-webkit-animation-duration: 10s, 10s;