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

Question

我正在对一些元素运行动画，这些元素在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; }
}

- Dan

Answer 1

尝试添加animation-fill-mode: forwards;。例如，可以像这样使用简写形式：

animation: bubble 1.0s forwards;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

- Christofer Vilander

---

你可以在这里阅读有关 animation-fill-mode 属性的内容 - http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property 希望这能帮助你！ - Christofer Vilander

animation-fill-mode属性的forwards值可以确保动画结束后元素会保持在最后一个关键帧的状态。例如，如果您的动画将width从0变为100px，则此属性可以确保动画结束后元素保持100px宽度。 - Farzad Yousefzadeh

别忘了在 @keyframe 中指定 100% / to 的位置，否则它将不起作用。 - Tomasz Mularczyk

我遇到了一个问题：至少在Chrome浏览器中，即使动画结束后，渲染器仍在消耗图形资源，导致应用程序反应不够灵敏。请查看我的答案以获得另一种方法。 - Luca Fagioli

有时候我觉得制作CSS API的人和我来自不同的星球 - undefined

Answer 2

如果你正在使用更多的动画属性，简写如下:

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

这将产生以下效果：

• bubble动画名称
• 2s持续时间
• linear时间函数
• 0.5s延迟
• 1循环次数（可以是'infinite'无限循环）
• normal方向
• forwards填充模式（如果要使用结束位置作为最终状态以支持没有启用动画的浏览器，则设置为'backwards'{仅回答标题，不针对您的特定情况}）

可用的时间函数：

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

可用方向

normal | reverse | alternate | alternate-reverse

- agiopnl

Answer 3

如果不使用简写版本：请确保在动画声明之后使用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;

- Taylor A. Leach

---

截至2023年，在Chrome 108.0.5359.124（官方版本）（64位）中，似乎无论animation-fill-mode行出现在哪个花括号块或另一个样式表中，甚至是在animation-name或其他属性之前或之后，都没有关系。如果确实有关系，那就完全违背了CSS规范的其他部分（这些规范定义了最终应用规则的计算）。不过，我不确定我是否正确理解了您的意思。 - Dmitry Koroliov

Answer 4

使用animation-fill-mode: forwards;

animation-fill-mode: forwards;

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

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

工作示例

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>

- Deepu Reghunath

Answer 5

我在使用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来展示它的工作原理。

- Luca Fagioli