@keyframes

关键帧 @keyframes 是一种 at 规则，它通过在动画序列中定义关键帧（或称为路标）的样式来控制 CSS 动画序列中的中间步骤。与过渡相比，keyframes 可以更精细地控制动画序列的中间步骤。

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

JavaScript 可以通过 CSS 对象模型的 CSSKeyframesRule 接口来访问 @keyframes。

要使用关键帧，首先需要创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画与其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，这些关键帧实际上是样式块语句，每个关键帧都有一个百分比值作为名称，表示在动画进行到哪个阶段时应用该帧所包含的样式。

关键帧百分比可以按任意顺序列出，浏览器会按照它们应该发生的顺序来处理这些关键帧。