1.CSS3过渡
（1）单项过渡
通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个CSS属性上；规定效果的时长。
例如：应用于宽度属性的过渡效果，时长为 2 秒：
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
注意：如果时长未规定，则不会有过渡效果，因为默认值是0。
效果开始于指定的CSS属性改变值时。CSS属性改变的典型时间是鼠标指针位于元素上时：
规定当鼠标指针悬浮于<div>元素上时：
div:hover
{
width:300px;
}
注释：当指针移出元素时，它会逐渐变回原来的样式。
（2）多项改变
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：向宽度、高度和转换添加过渡效果：
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
2.CSS3动画
通过CSS3，能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
（1）CSS3 @keyframes规则
如需在CSS3中创建动画，需要学习@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
（2）浏览器支持
Internet Explorer 10、Firefox以及Opera支持@keyframes规则和animation属性。Chrome和Safari需要前缀-webkit-。Internet Explorer 9，以及更早的版本，不支持@keyframe规则或animation属性。例如：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
（3）CSS3动画
当您在@keyframes中创建动画时，把它捆绑到某个选择器，否则不会产生动画效果。通过规定动画的名称、动画的时长等等CSS3动画属性，即可将动画绑定到选择器。
例如：把"myfirst"动画捆绑到div元素，时长：5秒：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
注意：必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是0。
（4）什么是CSS3中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
可以用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0%是动画的开始，100%是动画的完成。为了得到最佳的浏览器支持，建议始终定义0%和100%选择器。
①例如：当动画为25%及50%时改变背景色/图片，然后当动画100%完成时再次改变
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:300px;
background: url(1.jpg);
border-radius:5px;
animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */
}
@keyframes myfirst
{
0% {background: url(1.jpg);}
25% {background: url(2.jpg);}
50% {background: url(3.jpg);}
100% {background: url(4.jpg);}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: url(1.jpg);}
25% {background: url(2.jpg);}
50% {background: url(3.jpg);}
100% {background: url(4.jpg);}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: url(1.jpg);}
25% {background: url(2.jpg);}
50% {background: url(3.jpg);}
100% {background: url(4.jpg);}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: url(1.jpg);}
25% {background: url(2.jpg);}
50% {background: url(3.jpg);}
100% {background: url(4.jpg);}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
注意：加入关键字infinite可以让动画循环的播放下去。
②例如：改变背景色/图片和位置：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:480px;
height:456px;
background: url(1.jpg);
border-radius:5px;
position:relative;
animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */
}
@keyframes myfirst
{
0% {background: url(1.jpg);left:0px; top:0px;}
25% {background: url(2.jpg);left:200px; top:0px;}
50% {background: url(3.jpg);left:200px; top:200px;}
100% {background: url(4.jpg);left:0px; top:200px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: url(1.jpg);left:0px; top:0px;}
25% {background: url(2.jpg);left:200px; top:0px;}
50% {background: url(3.jpg);left:200px; top:200px;}
100% {background: url(4.jpg);left:0px; top:200px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: url(1.jpg);left:0px; top:0px;}
25% {background: url(2.jpg);left:200px; top:0px;}
50% {background: url(3.jpg);left:200px; top:200px;}
100% {background: url(4.jpg);left:0px; top:200px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: url(1.jpg);left:0px; top:0px;}
25% {background: url(2.jpg);left:200px; top:0px;}
50% {background: url(3.jpg);left:200px; top:200px;}
100% {background: url(4.jpg);left:0px; top:200px;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
（5）CSS3动画属性
例1：运行名为myfirst的动画，其中设置了所有动画属性：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
例2：与上面的动画相同，但是使用了简写的动画animation属性：
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
上面的两个案例可以发现，用animation属性，代码会简洁很多。