CSS学习笔记(五) 过渡与动画
这篇文章，我们将会介绍在 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>
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】
