尝试添加animation-fill-mode: forwards;。例如，缩写的用法如下：

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

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

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

这给出：

• bubble动画名称
• 2s持续时间
• linear定时函数
• 0.5s延迟
• 1迭代计数（可以是"infinite"）
• normal方向
• forwards fill-mode（如果您希望兼容使用结束位置作为最终状态，请设置"向后"[这是为了支持关闭动画的浏览器] {并且仅回答标题，而不是您的特定情况}）
• • 可用的定时功能：**

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

• • 可用方向**

normal | reverse | alternate | alternate-reverse

如果不使用速记版本：确保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;

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

animation-fill-mode: forwards;

元素将保留由最后一个关键帧设置的样式值（取决于animation-direction和animation-iteration-count）。
注：Internet Explorer 9和早期版本不支持@keyframes规则。

工作示例

x一个一个一个一个x一个一个二个x

我在使用forwards时遇到问题：至少在Chrome中，即使在动画结束后，渲染器仍在消耗图形资源，使应用程序响应速度变慢。
一种不会引起此问题的方法是使用EventListener。
CSS动画会发出事件，因此您可以使用animationend事件在动画结束时进行干预。

• • 中央支助组**

.fade_in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

• • 脚本语言**

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