Question

我在CSS中设置为opacity: 0;的某些元素上运行动画。动画类应用于onClick，并且使用关键帧将不透明度从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; }
}

Answer 1

尝试添加animation-fill-mode: forwards;。例如：

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

Answer 2

如果您使用更多动画属性，则速记为：

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

持续2s，线性定时功能，0.5s延迟，1次迭代计数，法线方向，前向填充模式

Answer 3

如果不使用简短版本，请执行以下操作：：请确保animation-fill-mode: forwards是在动画声明之后，否则将不起作用...

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

vs

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

Answer 4

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

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>

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 来展示它是如何工作的。

在CSS3动画结束时维护最终状态

5 个答案: