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。其中，from和0%效果相同表示动画的开始，to和100%

效果相同表示动画的结束; css-styles 定义执行到当前关键帧时对应的动画状态。以上3个属性

都是必需的，缺一不可。

二、animation 属性

animation属性用于描述动画的CSS声明，包括指定具体动画以及动画时长等行为。

animation属性的基本语法如下：

animation: name duration timing-function delay iteration-count di rectionfill -mode play-state;

与transtion类似，animation 也是一个复合属性，animation 的8个子属性如下表所示。

属性	说明	值
animation-name	规定@keyframes动画的名称	keyframe、name、none
animation-duration	规定动画完成一个周期所花费的时间	time 值，默认为0
animation-timing-function	规定动画的速度曲线	lineer、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n.n,n)
animation-delay	规定动画开始前的延迟，可选	time 值，默认为0
animation-iteration-count	规定动画被播放的次数	n、infinite
animation-direcion	规定动画是否在下一周期逆向播放	normal、altermate
animation-play-state	规定动画是否正在运行或暂停	paused、running
animation-fill-mode	规定对象动面时间之外的状态	none、fowards、backwards、both

实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS3 动画</title><style>body {margin: 0 ;padding: 0;background-color: #E7F7F7;}.box {width:400px;margin: 100px auto;animation: rotate 4s linear infinite;}img {width: 100%;display: block;}@keyframes rotate {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(-360deg);}}</style>
</head>
<body>
<div class="box"><img src=".idea\fengche.png">
</div>
</body>
</html>

在上述代码中中,是用@keyframes规则定义了一个名称为rotate的动画，在该动画中定义了两个关键

帧，第二个关键帧定义元素围绕z轴反转360°,在第15行使用animation属性调用了这个动画效果并应

用到了包含风车图片的div上，形成了风车转动的效果。