十、关键帧动画@keyframes及其调用方法animation


CSS3可以设置元素的关键帧动画，并通过元素的 animation 属性对关键帧动画进行调用，使得调用关键帧动画的元素具备动画能力。关键帧动画使用 @keyframes 属性进行设置，语法为：


        @keyframes 动画名称 { 动画内容 }


设定关键帧动画有两种方法：


        方法一：from ... to ...


from 是“从”的意思，to 意为“到”，表示动画从一个状态到另一个状态的变化。例如：


@keyframes walk {
        from { left: 0px; }
        to { left: 800px; }
}


这是定义 left 属性的变化，调用了 walk 动画的元素，left 值将从 0px 到 800px 逐步过渡，从而达成元素移动的效果，但需要一个前提：元素的 position 有设定，如绝对、相对定位。如果不想对元素进行 position 设置，可以考虑用 transform 的 translate 或 translateX、 translateY 进行水平或垂直移位：


@keyframes walk {
        from { transform: translate(0px); }
        to { transform: translate(800px); }
}




        方法二：百分比


本法使用百分比表示一个或一系列的属性的变化在某一点（即百分比所表示的时间节点）的形态。例如：


@keyframes walk {
        0% { left: 0px; }
        100% { left: 800px; }
}


同样的，用transform 的 translate 也可以达成相同的效果，且可以不需要调用动画的元素做 position 设置：


@keyframes walk {
        0% { transform: translate(0px); }
        100% { transform: translate(800px); }
}


上面的 walk 关键帧动画，其实等价于使用了 from ... to ... 方法的前例，但是，百分比可以拥有更多的节点，10%、20%、……、95%等等都可以，这时候，from ... to ... 方法就不能替代百分比方法。百分比方法可以设置更为细腻的关键帧动画，动画的状态可以精准到每一个百分比的时间节点，代价是使用更多的代码去具体描述动画的过程。


可用于设置关键帧动画的CSS属性很多，但不是全部的属性都可以使用。一般来说，物理位置（如left、margin）、尺寸（如width、height）、外观（如background、border-radius）、2d和3d动画属性（如transition和transform）等等都可以。


有了关键帧动画设置，使用关键帧动画的元素可以通过 animation 属性来调用，简写的语法为(带中括号的参数可省略)：


        animation: ①动画名称 ②周期时长 ③[运动曲线] ④[播放次数] ⑤[是否反向循环] ⑥[动画停止状态]


例如，#son 选择器要调用 walk 关键帧动画：


#son {
        /* 其它代码 */
        animation: walk 4s linear infinite alternate;
}


id="son" 的元素，调用了 walk 动画，动画运行的周期是4秒，匀速运行，循环运行，反向运行。


infinite 是循环运行的意思，可以用数字替代它；alternate 动画执行完毕再反向运行，用时也是4秒，一个动画过程因为有来回，实际使用的时间是 2 * 4 = 8 秒。


animate 属性还有分步（step）等参数，详情请自己查阅相关资料。

前一篇: 九、文本设置常用方法与技巧
下一篇: 十一、在帖子中使用音频媒体(一）