@keyframes 规则是 CSS 中用于创建动画序列的规则。它允许你定义一个动画序列，该序列包含在不同时间点上应用于元素的样式规则。通常，@keyframes 与 animation 属性一起使用。

以下是 @keyframes 的基本语法：
@keyframes animation-name {
  from {
    /* 初始样式规则 */
  }

  to {
    /* 最终样式规则 */
  }
}

或者，你也可以使用百分比表示动画的不同阶段：
@keyframes animation-name {
  0% {
    /* 初始样式规则 */
  }

  50% {
    /* 中间样式规则 */
  }

  100% {
    /* 最终样式规则 */
  }
}

实际应用中，你可以使用 animation-name 的名称，将该名称与元素的 animation 属性一起使用，以触发动画。下面是一个简单的例子：
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.slide-in-element {
  animation: slide-in 1s ease-in-out;
}

上述示例定义了一个名为 slide-in 的动画，从元素的初始位置（左侧屏幕外）平移至目标位置。然后，通过将 animation 属性应用于类为 slide-in-element 的元素，将动画绑定到该元素上。

@keyframes 允许你创建更为复杂和自定义的动画效果，通过在关键帧中定义样式规则的变化。


转载请注明出处：http://www.pingtaimeng.com/article/detail/6086/CSS