Animation Can'；t在一个周期结束时停止动画

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

但每当动画结束时，它都会重复自身。我只希望它发生一次，并停留在原地，直到用户离开。我试着使用规范中暂停的东西，但它没有像我期望的那样工作。感谢您的帮助。谢谢。：）

试试这个：

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

---

：）

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

可以将eventListener添加到动画中，检索要保留的样式，手动应用它们并删除动画

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

---

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

-webkit-animation-iteration-count: 1;

---

下面的评论对我很有用。谢谢你，迈克尔

---

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

-webkit-animation-fill-mode: forwards;

向前

使动画保持最后一帧的状态

---

向后

将动画保留在开始位置

以防动画仍重置为第一帧，请注意声明css的顺序：

这很好：

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

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

---

棘手！

将动画设置超过10秒，剩余超过10秒。仍然没有什么，我决定改为使动画非常长（比如10000秒长）因此，用户不太可能在它上面停留那么长的时间；这是真的，但我正在进行的实验是尝试用CSS来完成。感谢您的尝试，您需要添加填充模式以在动画结束时冻结动画状态。“-webkit动画填充模式：forwards“你不应该只是把动画制作得很长——这会消耗你的用户的CPU——CSS动画非常占用CPU。@Michael有趣！谢谢你，我不知道它的存在。我将尝试它，并肯定会在我的下一个项目中使用它。@MichaelMullany我认为CSS3动画是CPU密集型的这一事实不再适用。如果您在动画中使用3D变换，浏览器将尽可能多地使用GPU加速，您应该始终这样做。同意。这是过去的事了。刚刚编辑了答案以反映这一点。谢谢！为什么会这样？这是因为

animation

是所有

animation-*

属性的简写，设置

animation

将覆盖所有

animation-*

属性。此行为与其他速记相同（例如

背景

或

边框

）。如果您使用

animation

速记，并且没有定义填充模式，那么默认情况下将使用

none

。非常好！我不知道为什么这会发生在我身上！您可以像这样组合它：1s ease 0s normal forwards 1运行您的animationname就是这样，非常感谢！我知道有点晚了，但正确的方法实际上是动画播放状态：

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