---

CSS3 @keyframes 规则

CSS3 @keyframes 规则是 CSS3 中一个用于定义 CSS 动画的方法，它允许我们在动画过程中指定多个 CSS 样式，并在动画执行期间过渡到不同的样式。

语法

@keyframes <animation-name> {
  <keyframe-selector> {
    <css-styles>;
  }
}

属性

animation-name

该属性定义动画的名称，用于在后续的 animation 属性中引用。动画名称必须以字母开头，且不能以数字开头。

keyframe-selector

该属性定义动画在什么时间点值应该发生变化。如 0% 表示动画刚开始时的状态，100% 表示动画结束时的状态。keyframe-selector 可以是一个百分比值，也可以是用关键词命名的相对时间点值，如 from（等同于 0%） 和 to（等同于 100%）。

css-styles

该属性定义动画对应时间点应该应用哪些 CSS 样式。

示例

以下是一个简单的例子，它定义了一个从 0 度到 360 度旋转的动画：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

使用 rotate 动画：

div {
  animation-name: rotate;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

上面的例子中，animation-name 指定了使用 rotate 这个动画，animation-duration 指定动画持续时间为 3 秒，animation-timing-function 指定动画运动轨迹为线性，animation-iteration-count 指定动画循环播放无限次。

兼容性

@keyframes 规则从 CSS3 开始出现，并得到了所有现代浏览器的支持，包括：Chrome、Safari、Firefox、IE10+ 和 Opera。

总结

@keyframes 规则通过定义动画的名称、各个时间点的样式以及动画的持续时间、运动轨迹等属性，使得 CSS 动画的实现变得简单明了。在实际开发中，可以通过结合其他 CSS 属性和技巧，实现丰富多彩、生动有趣的视觉效果。