关键帧

关键帧（Keyframes）语法是CSS中用于定义动画序列的一种方式。关键帧动画通过 @keyframes 规则来创建，你可以指定动画在不同时间点的样式。下面是关键帧动画的基本语法：

@keyframes animation-name {
  0% {
    /* 在动画开始时应用的样式 */
  }
  50% {
    /* 在动画中间时应用的样式 */
  }
  100% {
    /* 在动画结束时应用的样式 */
  }
}

• @keyframes 关键字用于声明一个动画。
• animation-name 是你给动画定义的名称，之后可以在元素的 animation 属性中使用这个名称来引用这个动画。
• 0%, 50%, 100% 是关键帧的标记，代表动画的时间进度。0% 是动画的起始点，100% 是动画的结束点。你可以使用从 0% 到 100% 之间的任何百分比来指定动画的中间步骤。
• 在每个百分比的大括号 {} 内，你可以写入当动画达到该时间点时想要应用的CSS样式。

例如，如果你想创建一个简单的淡入淡出动画，可以这样写：

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

然后，你可以将这个动画应用到任何元素上，如下所示：

.element {
  animation: fadeInOut 3s infinite;
}

在这里，.element 是要应用动画的元素的类名。animation 属性使用了我们定义的 fadeInOut 动画，设置动画持续3秒，并且是无限循环的。

你也可以使用多个关键帧定义更复杂的动画效果：

@keyframes complex-animation {
  0% {
    transform: translateX(0px);
    background-color: blue;
  }
  25% {
    transform: translateX(100px);
    background-color: red;
  }
  50% {
    transform: translateX(200px);
    background-color: green;
  }
  75% {
    transform: translateX(100px);
    background-color: yellow;
  }
  100% {
    transform: translateX(0px);
    background-color: blue;
  }
}

这个例子中的动画让元素在水平方向上移动，并且在移动过程中改变背景颜色。