css3动画如何在动作结束时保持该状态不变

Posted 2023-05-09

animation-fill-mode : none | forwards | backwards | both;

none：不改变默认行为。    

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。    

both：向前和向后填充模式都被应用。  

扩展资料：

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块   。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。

参考资料：百度百科-CSS3

参考技术A animation-fill-mode : none | forwards | backwards | both;

none：不改变默认行为。    

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。    

both：向前和向后填充模式都被应用。    

本回答被提问者和网友采纳 参考技术B @keyframes定义，把默认属性和100%的属性写一样 参考技术C 了解一下 animation-fill-mode。 参考技术D 动画执行的次数限定

如何只在触发时运行 CSS3 关键帧动画？

【中文标题】如何只在触发时运行 CSS3 关键帧动画？

【英文标题】：How to run a CSS3 keyframe animation once, and only when triggered?

【发布时间】：2013-11-04 06:42:27

【问题描述】：

我想实现一个 HTML5 动画，它涉及的不仅仅是将一个项目从 A 点移动到 B 点。这就是我考虑使用关键帧而不是过渡的原因。但是，我只希望动画运行一次，并且仅在触发时运行。

问题是双重的： 1) 动画结束后，item 回到起始位置。有没有办法让它保持在最终位置，直到另行通知？ 2) 有没有办法稍后从 Javascript 重新启动动画？

我看到的另一种可能的解决方案是使用 onTransitionEnd 事件链接一些转换。

考虑到性能，这里最好的解决方案是什么？我只针对 Webkit 浏览器，包括移动设备。

编辑：根据@Christofer-Vilander 的评论，我做了一个JSfiddle，它基本上可以满足我的要求。谢谢！

HTML：

<button id="start">Start</button> <button id="reset">Reset</button>
<br/>
<div id="ball" class="ball"></div>

Javascript：

document.getElementById('start').addEventListener('click', function(e) 
    document.getElementById('ball').classList.add('remove');
);

document.getElementById('reset').addEventListener('click', function(e) 
    document.getElementById('ball').classList.remove('remove');
);

CSS：

.ball 
    width:100px;
    height:100px;
    border-radius:100px;
    background-color:darkred;
    position:absolute;
    top:100px;
    left:200px;


@-webkit-keyframes slide 
    from  top:100px; left:200px; 
    to  top:100px; left:-100px; 


.remove 
    animation: slide 1s linear;
    -webkit-animation: slide 1s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;

【问题讨论】：

你应该可以使用 animation-fill-mode: forwards;保持动画的结束状态。您希望如何再次触发动画？一定时间后点击、悬停还是自动？

我想同时使用 onClick 和/或计时器来启动它。

刚刚注意到您的编辑，很高兴能帮上忙！

【参考方案1】：

使用 Javascript 在 html 元素中添加一个类，以及该类所需的 css 动画规则集。使用animation-fill-mode: forwards; 让动画运行一次。 然后，从元素中移除该类以重新运行 onClick 动画。