CSS3 中的@keyframes介绍

对于CSS3 中的 @keyframes，我们来一步一步详细介绍。

@keyframes是什么？

@keyframes是CSS3 新增的一个用于动画的规则（rule），它允许创建一个动画序列，调整组成动画的关键帧（keyframes）的样式。使用 @keyframes 规则，可以定义动画序列的关键帧（在动画中规定样式改变的时间），每个关键帧中有样式规则，动画中的每一帧将会依次展示每一关键帧的样式。

@keyframes 的语法

@keyframes 规则存放于CSS样式表中，需要注意的是，@keyframes 规则必须与动画使用的选择器一起，例如使用 animation-name 属性，一个 @keyframes 规则的格式如下：

@keyframes name { 
    keyframes-selector {
        css-rules;
    }
    // ...
}

其中，name 指定了定义的关键帧动画的名称，keyframes-selector 则指定了动画的某个帧，css-rule 声明了样式规则。

整个动画的语法为：

selector {
    animation-name: name;  /* 指定要播放的动画 */
    animation-duration: 5s; /* 指示动画的时长 */
    animation-delay: 0s; /* 指定延迟多少秒后播放动画 */
    animation-iteration-count: infinite; /* 指定动画播放的次数 */
    animation-direction: alternate; /* 指定动画的方向，可以为 normal（正向播放）、reverse（反向播放）和 alternate（正向和反向轮流播放） */
    animation-timing-function: ease-in-out; /* 指定动画的时间函数 */
}

@keyframes 的示例说明

为了更好地理解 @keyframes 的使用，这里举两个具体的例子：

示例一

如下所示的 HTML 代码片段：

<div class="demo"></div>

我们可以通过下面的 CSS 代码片段来实现让盒子上下抖动的效果：

.demo {
    height: 100px;
    width: 100px;
    background-color: red;
    animation: updown 1s infinite;
}

@keyframes updown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

以上代码让 .demo 元素一秒钟执行一次名为 updown 的动画，这个动画是通过 @keyframes 规则定义的。这个动画的关键帧一次将 transform 的 translateY 值从 0px（第一帧）到 -10px（第二帧），再从 -10px 回到 0px（第三帧）。

示例二

如下所示的 HTML 代码片段：

<div class="demo"></div>

我们可以通过下面的 CSS 代码片段实现让盒子从左到右匀速移动的效果：

.demo {
    height: 100px;
    width: 100px;
    background-color: red;
    animation: move 2s infinite;
}

@keyframes move {
    from {
        left: 0px;
    }
    to {
        left: 200px;
    }
}

以上代码让 .demo 元素循环每2s一次执行 move 动画，该动画是通过 @keyframes 规则定义的，让元素从左边从 0px 直接到移动到 200px 处，从而实现了左到右平移移动的效果。

以上就是关于 @keyframes 的详细介绍和两个实例说明。