417

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

5 回答 5

713

尝试添加animation-fill-mode: forwards;. 例如像这样：

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
于 2012-10-20T18:02:03.970 回答
65

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

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

这给出了：

  • bubble动画名称
  • 2s期间
  • linear计时功能
  • 0.5s延迟
  • 1迭代计数（可以是 ' infinite'）
  • normal方向
  • forwards填充模式（如果您想具有兼容性以使用结束位置作为最终状态，请设置“向后”[这是为了支持关闭动画的浏览器]{并且只回答标题，而不是您的具体情况}）
于 2017-01-14T00:28:01.623 回答
29

如果不使用短手版本：确保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;
于 2018-09-11T22:03:16.863 回答
8

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

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>

于 2019-09-20T16:22:06.817 回答
0

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

于 2021-04-10T09:54:23.533 回答