CSS @keyframes 规则

CSS @keyframes 语法

在 CSS 中，@keyframes 规则用于定义动画的各个关键帧。

语法：

@keyframes 动画名 {
    0% {}
    ……
    100% {}
}

说明：

0% 表示动画的开始，100% 表示动画的结束，我们一般需要定义 0% 和 100%。不过在一个 @keyframes 规则中，可以由多个百分比组成，每一个百分比都可以定义自身的 CSS 样式，从而形成一系列的动画效果。

在使用 @keyframes 规则时，如果仅仅只有 0% 和 100% 这两个百分比的话，此时 0% 和 100% 可以使用关键字 from 和 to 来代替，其中 0% 对应 from，100% 对应 to。下面 2 种方式是等价的：

/* 方式1 */
@keyframes mycolor {
  0% { color:red; }
  100% {color:green; }
}

/* 方式2 */
@keyframes mycolor {
  from { color:red; }
  to {color:green; }
}

注意:

@keyframes 规则仅仅是定义了动画，它本身并不会触发动画。我们需要通过 animation-name 属性将这个动画应用到元素上，并结合 animation-duration、animation-timing-function 等属性来控制动画的播放。
如果 0% 和 100% 的关键帧没有明确定义，浏览器会使用元素的计算样式作为默认的起始和结束状态。不过，为了清晰和可控，建议总是定义 0% 和 100%。

CSS @keyframes 摘要

属于	CSS 动画
使用频率	高
是否继承	否
默认值	无
兼容性	查看
官方文档	查看
MDN	查看

CSS @keyframes 示例

接下来，我们通过一个简单的例子来讲解一下 @keyframes 属性是如何使用的。

示例：@keyframes 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /*定义动画*/
        @keyframes mycolor
        {
            0% { background-color: red; }
            30% { background-color: blue; }
            60% { background-color: yellow; }
            100% { background-color: green; }
        }

        div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: red;
        }
        div:hover {
            /* 调用动画 */
            animation:mycolor 5s linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

@keyframes 示例

分析：

在这个例子中，我们使用 @keyframes 规则定义了一个名为 “mycolor” 的动画。在这个动画中，元素开始时的背景颜色是红色，在 0% 到 30% 之间背景颜色从红色变为蓝色，然后在 30% 到 60% 之间背景颜色从蓝色变为黄色，最后在 60% 到 100% 之间背景颜色从黄色变为绿色。动画执行完毕，背景颜色会回归到红色（初始值）。

初学的小伙伴肯定会有这样的疑问：“这些百分比究竟是什么意思啊？是相对什么来说的呢？” 哪还能有什么呢，闭着眼都知道是相对于 “持续时间”！像上面这个例子中，我们定义持续时间为 5s，则 0% 指的是 0s 时，30% 指的是 1.5s 时，60% 指的是 3s 时，而 100% 指的是 5s 时，如下图所示。

@keyframes 时间轴

我们可以使用 @keyframes 规则定义动画，不过这仅仅是定义而已，动画并不会自动执行。因此我们还需要使用 animation 属性来 “调用动画”，这样动画才会生效。其实动画的定义和调用，跟 JavaScript 函数的定义和调用是一样的道理，我们稍微对比一下就很好理解了。