无法在一个周期结束时停止动画[重复]

Posted 2023-03-06

【中文标题】无法在一个周期结束时停止动画[重复]

【英文标题】：Can't stop animation at end of one cycle [duplicate]

【发布时间】：2011-03-06 11:12:24

【问题描述】：

我正在制作一个 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】：

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

"在动画结束时需要添加填充模式来冻结动画状态。

-webkit-animation-fill-mode: forwards;

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

backwards 将动画留在开头

【讨论】：

我知道有点晚了，但实际上正确的方法是动画播放状态：developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

【参考方案2】：

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

这工作正常：

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

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

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

棘手！

【讨论】：

谢谢！这是什么原因？

这是因为animation 是所有animation-* 属性的简写，设置animation 将覆盖所有animation-* 属性。此行为与其他简写相同（例如 background 或 border）。如果您使用animation 简写且未定义填充模式，则默认使用none。

好点！我不知道为什么这会发生在我身上！

你可以像这样组合起来单行animation: 1s ease 0s normal forwards 1 running yourAnimationName;

【参考方案3】：

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

-webkit-animation-iteration-count: 1;

【讨论】：

就是这样，非常感谢！

【参考方案4】：

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

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

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

【讨论】：

这是真的，但我进行的实验是尝试仅使用 CSS 来完成。感谢您尝试

您需要添加填充模式以在动画结束时冻结动画状态。 "-webkit-animation-fill-mode:forwards" 你不应该只是让动画超长 - 这会消耗你的用户 CPU - CSS 动画非常占用 CPU。

@Michael 有趣！谢谢你，我不知道它存在。我会尝试它，并且一定会在我的下一个项目中使用它。

@MichaelMullany 我认为 CSS3 动画是 CPU 密集型的事实不再适用。如果您在动画中使用 3D 变换，浏览器会尽可能地尝试使用 GPU 加速，而您应该始终这样做。

同意。这又回到了过去。刚刚编辑了答案以反映这一点。

【参考方案5】：

试试这个：

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

:)

【讨论】：

将动画超过 10 秒，剩余 10 秒。

还是什么都没有，我决定让动画变得很长（比如 10,000 秒长），这样用户就不太可能将鼠标悬停在上面那么长的时间；D