CSS3 动画在结束时恢复为 0 不透明度答案

【问题标题】：CSS3 Animation reverts back to 0 opacity at endCSS3 动画在结束时恢复为 0 不透明度
【发布时间】：2018-01-27 02:59:37
【问题描述】：

当用户单击某些内容时，我正在向某些元素添加动画。默认情况下，元素的不透明度为 0，添加动画时变为 1。

问题：动画完成后它们恢复为 0 不透明度。

我按照每个相关答案的建议添加了animation-fill-mode: forwards;，但它仍然不起作用。

【问题讨论】：

【解决方案1】：

您应该将最后一个关键帧设置为100% 而不是50%，这样它才会覆盖初始的.element {opacity: 0} 规则：

100% {
  opacity: 1;
}

【讨论】：