在 CSS3 动画结束时保持最终状态

Posted 2023-03-06

【中文标题】在 CSS3 动画结束时保持最终状态

【英文标题】：Maintaining the final state at end of a CSS3 animation

【发布时间】：2012-10-11 01:35:44

【问题描述】：

我在 CSS 中设置为 opacity: 0; 的某些元素上运行动画。动画类在点击时应用，并使用关键帧将不透明度从0 更改为1（除其他外）。

不幸的是，当动画结束时，元素会回到opacity: 0（在 Firefox 和 Chrome 中）。我的自然想法是动画元素保持最终状态，覆盖它们的原始属性。这不是真的吗？如果没有，我怎样才能让元素这样做？

代码（不包括前缀版本）：

@keyframes bubble 
    0%    transform:scale(0.5); opacity:0.0; 
    50%   transform:scale(1.2); opacity:0.5; 
    100%  transform:scale(1.0); opacity:1.0; 

【问题讨论】：

我会发布我自己的重复通知：***.com/questions/9196694/css3-animation-scale 至少我的标题更有启发性！

CSS3 Animate: How to have the object not revert to its initial position after animation has run?的可能重复

【参考方案1】：

我在使用 forwards 时遇到了问题：至少在 Chrome 中，即使在动画结束后，渲染器仍在消耗图形资源，导致应用程序响应速度变慢。

一种不会导致此问题的方法是使用EventListener。

CSS 动画会发出事件，因此您可以在动画结束时使用animationend 事件进行干预。

CSS

.fade_in 
  animation: fadeIn 2s;


@keyframes fadeIn 
  from 
    opacity: 0;
  

  to 
    opacity: 1;
  

JavaScript

const element = document.getElementById("element-to-be-animated");

element.addEventListener("animationend", () => 
    // Set your final state here. For example:
    element.style["opacity"] = 1;
,  once: true );

once: true 选项告诉引擎在事件侦听器执行后删除它，让您的应用程序保持新鲜和干净。

我创建了一个JSFiddle 来展示它的工作原理。

【参考方案2】：

如果您使用更多动画属性，则简写为：

animation: bubble 2s linear 0.5s 1 normal forwards;

这给出了：

bubble动画名称 2s持续时间 linear定时功能 0.5s延迟 1 迭代计数（可以是'infinite'） normal方向 forwardsfill-mode（如果你想兼容使用结束位置作为最终状态，请设置“向后”[这是为了支持关闭动画的浏览器]并且只回答标题，而不是你的具体案例)

【讨论】：

这比接受的答案更正确和完整，这对我的用例不起作用。

【参考方案3】：

使用 动画填充模式：转发；

animation-fill-mode: forwards;

元素将保留最后一个关键帧设置的样式值（取决于动画方向和动画迭代计数）。

注意：Internet Explorer 9 及更早版本不支持@keyframes 规则。

工作示例

div 
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */


/* Safari */
@-webkit-keyframes bubble  
  0%    transform:scale(0.5); opacity:0.0; left:0
    50%   transform:scale(1.2); opacity:0.5; left:100px
    100%  transform:scale(1.0); opacity:1.0; left:200px


/* Standard syntax */
@keyframes bubble  
   0%    transform:scale(0.5); opacity:0.0; left:0
    50%   transform:scale(1.2); opacity:0.5; left:100px
    100%  transform:scale(1.0); opacity:1.0; left:200px

<h1>The keyframes </h1>
<div></div>

【参考方案4】：

尝试添加animation-fill-mode: forwards;。比如这样：

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

【讨论】：

是的，就是这样。我会检查你的答案。如果有任何 CSS 负责人想评论所需背后的逻辑，我很想知道！

您可以在此处阅读有关动画填充模式属性的信息 - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property希望对您有所帮助！

@Dan forwards 属性的forwards 值确保动画结束后元素将保持动画的最后一个关键帧状态。例如，如果您的动画将width 从 0 像素更改为 100 像素，则此属性可确保动画结束后元素保持 100 像素宽。

不要忘记在@keyframe 中指定100% / to 点，否则它将不起作用。

animation-fill-mode:forwards 也对我有用，但只有在规则中添加了 '!important' 命令之后

【参考方案5】：

如果不使用简写版本：确保animation-fill-mode: forwards 在动画声明之后在之后，否则它将不起作用...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

对

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;