Question

我正在制作一个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;
}

每当动画结束时，它就会重复。我只希望它发生一次并保持原状直到用户离开。我尝试使用规范中的暂停的东西，但它不能像我期望的那样工作。任何帮助表示赞赏。谢谢。：）

Answer 1

以下评论对我有用。谢谢迈克尔

“您需要添加填充模式以冻结动画结束时的动画状态。

-webkit-animation-fill-mode: forwards;

forwards使动画处于最后一帧的状态

backwards将动画留在开头

Answer 2

如果您的动画仍然重置为第一帧，请注意声明css的顺序：

这很好用：

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

这不会（重置为第一帧）：

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

棘手！

Answer 3

如果我正确理解了这个问题，听起来你需要将迭代设置为'1'。

-webkit-animation-iteration-count: 1;

Answer 4

css3动画重置为动画结束时的默认样式。您可以尝试使用javascript：

您可以为动画添加eventListener，检索您想要保留的样式，手动应用它们并移除动画。

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

Answer 5

试试这个：

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

：）

无法在一个周期结束时停止动画

5 个答案: