首页 > 编程笔记 > CSS笔记 阅读：16

CSS帧动画的具体实现（附带实例）

帧动画需要在块元素或行内块元素中应用，具体分两个步骤来实现：
下面的代码展示了帧动画的基本实现：
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin: 30px;
        }
        /* 定义关键帧 */
        @keyframes block_rotate {
            0% {
                transform: rotate(60deg);
            }
            20% {
                transform: rotate(120deg);
            }
            40% {
                transform: rotate(180deg);
            }
            60% {
                transform: rotate(240deg);
            }
            80% {
                transform: rotate(300deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        /* 动画应用 */
        #div2 {
            animation-name: block_rotate;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</body>
</html>
上述代码中使用 @keyframes 指令定义了一个名为 block_rotate 的关键帧组，其中的 0% 到 100% 指定在动画各个阶段应用的样式，这里设置的动画就是每个阶段旋转 60°，最终恢复到初始状态。

接下来，在 div2 元素的样式中，使用 animation-name 属性设置关键帧组的名称，并使用 animation-duration 属性指定动画执行的时间，这里指定 2s 完成整个动画过程。

下面再了解一些帧动画相关的属性：

属性名称 说明
animation-delay 设置动画延时时间，如 1s 表示 1 秒。
animation-iteration-count 设置动画执行次数，infinite 值表示无限循环。
animation-timing-function 设置计时函数，也就是动画执行的节奏，常用的属性值有：
  • ease：默认值。
  • linear：匀速。
  • ease-in-out：开始慢，接着加速，再慢下来。
  • ease-in：开始慢，然后匀速。
  • ease-out：开始匀速，然后慢下来。
animation-fill-mode 指定动画执行前或执行后元素样式的应用模式，其值包括：
  • backwards 值：第一个关键帧中的属性会立即应用，当有延迟或停止状态时也是这样的；
  • forward 值：应用最后一个关键帧的计算样式；
  • both 值：同时应用正向和反向填充；
animation-play-state 指定动画执行的状态，属性值包括：
  • paused：暂停。
  • running：执行。
animation-direction 设置动画播放的方向，包括：
  • normal：正向播放。
  • reverse：反向播放。
  • alternate：正向和反向交替播放，先正向播放。
  • alternate-reverse：正向和反向交替播放，先反向播放。

此外，动画也有一个组合属性 animation，但由于动画的设置比较复杂，建议大家使用具体的属性进行动画效果的设置工作。

下面的代码简单地演示了 animation 属性的应用。 
/* 动画应用 */
#div2 {
    animation:block_rotate 2s linear infinite alternate;
}
本例中，div2 元素会先顺时针旋转，然后逆时针旋转，并无限循环。

相关文章