我在一些元素上运行一个动画，设置为不透明度:0;在CSS中。动画类应用于click，并使用关键帧，它将不透明度从0更改为1(其中包括其他内容)。
不幸的是，当动画结束时，元素的不透明度又回到了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; }
}
当前回答
尝试添加animation-fill-mode: forward;例如，简写可以这样使用:
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;
其他回答
尝试添加animation-fill-mode: forward;例如，简写可以这样使用:
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;
如果没有使用SHORT HAND版本:确保animation-fill-mode: forward是在动画声明之后，否则它将不起作用…
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;
使用 animation-fill-mode:转发;
animation-fill-mode: forwards;
元素将保留由最后一个关键帧设置的样式值(取决于animation-direction和animation-iteration-count)。
注意:在ie9和更早的版本中不支持@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>
如果你使用更多的动画属性，简写如下:
animation: bubble 2s linear 0.5s 1 normal forwards;
这给:
气泡动画名称 2 s持续时间 线性定时功能 0.5秒延迟 1次迭代计数(可以是'infinite') 正常的方向 正向填充模式(如果你想兼容使用结束位置作为最终状态[这是为了支持动画关闭的浏览器]{并且只回答标题，而不是你的特定情况}，则设置“向后”)
可用时间函数:
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end
可用的方向
normal | reverse | alternate | alternate-reverse
我有一个使用转发的问题:至少在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来展示它是如何工作的。
