CSS3 @keyframes 规则

在 CSS 中，@keyframes 规则用于创建动画效果。通过定义关键帧（keyframes），我们可以控制动画的每一帧的样式变化。

语法

@keyframes 规则的语法如下：

@keyframes animationName {
  from {
    /* 初始样式 */
  }
  to {
    /* 结束样式 */
  }
}

或者可以使用百分比来定义关键帧：

// www.javascriptcn.com code example
@keyframes animationName {
  0% {
    /* 初始样式 */
  }
  50% {
    /* 中间样式 */
  }
  100% {
    /* 结束样式 */
  }
}

示例

下面是一个简单的 @keyframes 规则的示例：

// www.javascriptcn.com code example
@keyframes slidein {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

.element {
  animation: slidein 1s infinite;
}

在这个示例中，元素会从右侧滑入到页面中，并且动画会无限循环。

使用关键帧

要使用关键帧定义的动画效果，可以通过 animation 属性将其应用到元素上：

.element {
  animation: animationName duration timing-function delay iteration-count direction fill-mode play-state;
}

• animationName：指定要应用的动画名称。
• duration：指定动画的持续时间。
• timing-function：指定动画的时间函数。
• delay：指定动画延迟开始的时间。
• iteration-count：指定动画的播放次数。
• direction：指定动画播放的方向。
• fill-mode：指定动画在播放前和播放后的状态。
• play-state：指定动画的播放状态。

总结

@keyframes 规则为我们提供了一种在 CSS 中创建动画效果的强大工具。通过定义关键帧，我们可以精确控制动画的每一帧，从而实现各种炫酷的动画效果。希望通过本章节的介绍，你对 @keyframes 属性有了更深入的了解。