共计 2102 个字符，预计需要花费 6 分钟才能阅读完成。
css3 动画主要包含两个知识点：1 是 css 过渡（transition）2 是 css 动画（animation）
1.transition，css 过渡是元素从一种样式逐渐改变为另一种的效果。必须规定两项内容：1，指定要添加效果的 css 属性，2. 指定效果的持续时间。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>test</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:background 2s;
-webkit-transition:background 2s; /* Safari */
}
div:hover
{
background:green;
}
</style>
</head>
<body>
<p><b> 注意：</b> 该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p> 鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>
注意：transition 后面跟的属性就是要变化的属性。
2.animation。要创建 css3，必须先了解 @keyframes 规则。@keyframes 作用就是创建动画，可以指定一个 css 样式和动画逐步从目前的样式更改为新的样式。@keyfragmes 里没有时间秒的概念，只有百分比的概念，0% 就是动画的开始，100% 就是动画的结束，动画可以设置播放次数，默认是 1 次。即播放完一次动画就停止。写完 @keyframes 接下来就是用 animation 去调用 keyframes 了。
使用例子：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>test</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b> 注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
