CSS3 动画——animations

CSS3动画( CSS3 animations )

我们学习了CSS3的transition 和transform属性，虽然二者结合可以实现一些简单的动画效

果，但是也有一些难以克服的缺点，如无法实现动画在多个状态中转换。CSS3中最后一个动画相关

的属性是animations，有了它就可以解决这样的问题。

一个完整的CSS animations由两部分构成: 一组定义的动画关键帧和描述该动画的CSS声明。接下

来，我们分别对其进行说明。

一、@keyframes规则

在CSS3中使用@keyframes规则来创建动画，keyframes 可以设置多个关键帧，每个关键

帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。

@keyframes规则的语法格式如下：

@keyframes animati onname {
             keyframes-selector {css-styles};
}

在上面的语法格式中，animationname表示当前动画的名称，它将作为引用时的唯一标识，因此

不能为空; keyframes- selector是关键帧选择器，即指定当前关键帧要应用到整个动画过程

中的位置值是一个百分比、from或者to