无法在一个循环结束时停止动画

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;
}

当动画结束时，它会一遍又一遍地重复播放。我只希望它发生一次并停留在那里，直到用户移开为止。我尝试了使用规范中的paused属性，但它并没有像我期望的那样工作。非常感谢任何帮助。

- Johnny

Answer 1

以下评论对我有用。谢谢Michael。

“你需要添加fill-mode以在动画结束时冻结动画状态。”

-webkit-animation-fill-mode: forwards;

forwards命令会使动画停留在最后一帧的状态。

backwards命令会使动画返回到起始状态。

- iancrowther

---

我知道有点晚了，但正确的方式实际上是animation-play-state：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state - Marco

Answer 2

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

这个是正常工作的：

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

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

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

棘手！

- Mr_Pouet

---

谢谢！这是为什么呢？ - mariachimike

这是因为 animation 是所有 animation-* 属性的速记形式，设置 animation 将覆盖所有 animation-* 属性。这种行为与其他速记属性（例如 background 或 border）相同。如果您使用 animation 速记并且未定义填充模式，则默认情况下将使用 none。 - Mikko Rantalainen

太好了！我完全不知道为什么会发生这种情况！ - Adrian Florescu

您可以像这样一行代码将其组合起来：animation: 1s ease 0s normal forwards 1 running 您的动画名称; - Vasil

Answer 3

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

-webkit-animation-iteration-count: 1;

- word5150

---

就这样了，非常感谢！ - Stan Smulders

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
);

- Stef

---

这是真的，但我正在进行的实验是尝试只使用CSS来完成它。谢谢你的尝试。 - Johnny

您需要添加fill-mode以在动画结束时冻结动画状态。 "-webkit-animation-fill-mode：forwards" 您不应只是将动画时间变得非常长 - 这会占用用户的CPU资源 - CSS动画非常消耗CPU资源。 - Michael Mullany

@Michael 很有趣！谢谢你分享这个，我之前不知道它的存在。我会试用它，并在我的下一个项目中一定会使用它。 - Stef

@MichaelMullany 我认为CSS3动画占用CPU资源的事实已经不再适用了。如果在动画中使用3D变换，浏览器会尽可能地使用GPU加速。你应该始终这样做。 - Lorenzo Polidori

同意。那是很久以前的事了。我刚刚编辑了答案以反映这一点。 - Michael Mullany

Answer 5

试一下这个：

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

:)

- CMartins

---

将在10秒内进行动画，并剩余10秒。 - CMartins

仍然没有想到好的解决方案，我决定将动画长度延长到非常长（比如10,000秒），这样用户不太可能在那么长的时间内悬停在上面；D - Johnny