Вопросы Теги

Не может остановить анимацию в конце одного цикла [дубликат]

Этот вопрос уже имеет ответы здесь:

Остановка Анимации CSS3 на последнем кадре (8 ответов)

Закрытый 4 года назад.

Я делаю анимацию 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;
}

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

44

animation webkit css3

задан Marcel Korpel 22 June 2010 в 11:11

поделиться

1 ответ

попробуйте это:

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

:)

0

ответ дан 26 November 2019 в 21:48

поделиться

Другие вопросы по тегам:

animation webkit css3

Похожие вопросы: