这篇文章，我们将会介绍在 CSS3 中加入的 过渡 与 动画 效果
1、过渡
通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，使得元素在样式转换时添加过渡效果
（1）属性名称
可以使用 transition-property 规定应用过渡效果的属性名称，当指定的属性改变时，过渡效果开始作用
可选值如下：
none：表示没有属性获得过渡效果，默认值all：表示所有属性获得过渡效果名称列表：指定获得过渡效果的属性，列表以逗号分隔
（2）作用时间
可以使用 transition-duration 规定过渡效果的作用时间，其接受一个时间值，默认为 0
因此在使用过渡效果时，必须要设置 transition-duration 属性，否则将无法看到过渡效果
（3）作用速度
可以使用 transition-timing-function 规定过渡效果的速度曲线，可选值如下：
linear：以相同的速度从开始至结束ease：默认值，以慢速开始，然后变快，以慢速结束ease-in：以慢速开始ease-out：以慢速结束ease-in-out：以慢速开始，以慢速结束
（4）延迟时间
可以使用 transition-delay 延迟过渡效果的开始时间，这个属性同样接受一个时间值，默认为 0
（5）简写属性
为了方便，可以仅在 transition 属性中设置所有有关过渡效果的属性
transition: property duration timing-function delay;
一个简单的例子如下：
<!DOCTYPE HTML> <html> <head> <style> div { width: 100px; height: 100px; background: LightSkyBlue; } div:hover { width: 300px; } .withTransition { width: 100px; height: 100px; background: LightSkyBlue; transition: width 1s ease; -o-transition: width 1s ease; /* Opera */ -moz-transition: width 1s ease; /* Firefox */ -webkit-transition: width 1s ease; /* Safari and Chrome */ } /* 当鼠标停留在 div 元素上时，宽度将会变化，从而产生过渡效果 */ </style> </head> <body> <div></div> <br/> <div class="withTransition"></div> </body> </html>
2、动画
通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，为网页创建动画
（1）动画名称
可以使用 animation-name 属性规定动画名称，它的可选值有两个：
none：无动画，一般用于覆盖来自级联的动画效果名称：定义动画名称
（2）播放时间
可以使用 animation-duration 规定动画效果的作用时间，其接受一个时间值，默认为 0
因此在使用动画时，必须要设置 animation-duration属性，否则将无法看到动画效果
（3）播放速率
可以使用 animation-timing-function 规定动画效果的速度曲线，可选值如下：
linear：以相同的速度从开始至结束ease：默认值，以慢速开始，然后变快，以慢速结束ease-in：以慢速开始ease-out：以慢速结束ease-in-out：以慢速开始，以慢速结束
（4）延迟时间
可以使用 animation-delay 延迟动画效果的开始时间，这个属性同样接受一个时间值，默认为 0
（5）播放次数
可以使用 animation-iteration-count 属性规定动画的播放次数，可选值如下：
数字：表示播放次数，默认为 1infinite：表示无限播放
（6）播放方向
可以使用 animation-direction 属性规定动画的播放方向，可选值如下：
normal：默认值，正常播放alternate：轮流反向播放
（7）播放状态
可以使用 animation-play-state 属性规定动画的播放状态，可选值如下：
running：默认值，正在播放paused：暂停
（8）间隙可见性
可以使用 animation-fill-mode 属性规定动画在播放之前或之后效果的可见性，可选值如下：
none：不改变默认行为forwards：在动画完成之后，保持最后的属性值（在最后一个关键帧中定义）backwards：在动画显示之前，应用开始的属性值（在第一个关键帧中定义）both：在动画显示之前应用开始的属性值，在动画完成之后保持最后的属性值
（9）简写属性
为了方便，可以仅在 animation 属性中设置所有有关动画的属性
animation: name duration timing-function delay iteration-count direction;
（10）@keyframes 规则
动画的原理其实就是将一套 CSS 样式逐渐变换成另一套 CSS 样式
我们可以通过 keyframes 规则，通过百分比定义关键帧的 CSS 样式，从而创建出一个连续播放的动画
另外除了使用百分比，也能使用
另外除了使用百分比，也能使用关键字定义关键帧，关键字分别是 from（对应 0%）和 to（对应 100%）
一个简单的例子如下：
<!DOCTYPE HTML> <html> <head> <style> div { width: 100px; height: 100px; background: LightSkyBlue; position: relative; animation: test 2s linear infinite alternate; -webkit-animation: test 2s linear infinite alternate; /*Safari and Chrome*/ } @keyframes test { from { left: 0px; } to { left: 200px; } } @-webkit-keyframes test { /*Safari and Chrome*/ from { left:0px; } to { left:200px; } } </style> </head> <body> <div></div> </body> </html>
