首页 > 编程笔记 > CSS笔记 阅读:12

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 元素会先顺时针旋转,然后逆时针旋转,并无限循环。

相关文章