动画：通过CSS3,我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript.
CSS3@keyframes规则：
@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
浏览器支持：Internet Explorer1O、Firefox以及Opera支持@keyframes规则和animation属性。Chrome和Safari需要前缀-webkit-
规则：通过规定至少以下两项CSS3动画属性，即可将动画绑定到选择器：规定动画的名称，规定动画的时长
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #f00;
animation: myfirstAnim 3s;
-webkit-animation: myfirstAnim 3s;
}
@keyframes myfirstAnim{
from{
background-color: #f00;
}
to{
background-color: #0f0;
}
}
-webkit-@keyframes myfirstAnim{
from{
background-color: #f00;
}
to{
background-color: #0f0;
}
}
.box{
width: 100px;
height: 100px;
background-color: #BBFFFF;
position: relative;
animation: myanim 5s;
-webkit-animation: myanim 5s;
}
@keyframes myanim{
0%{
background-color: #BBFFFF;
left: 0;
top: 0;
}
25%{
background-color: #668B8B;
left: 200px;
top: 0;
}
50%{
background-color: #DCDCDC;
left: 200px;
top: 200px;
}
75%{
background-color: #FFFACD;
left: 0;
top: 200px;
}
100%{
background-color: #BBFFFF;
left: 0;
top: 0;
}
}
-webkit-@keyframes myanim{
0%{
background-color: #BBFFFF;
left: 0;
top: 0;
}
25%{
background-color: #668B8B;
left: 200px;
top: 0;
}
50%{
background-color: #DCDCDC;
left: 200px;
top: 200px;
}
75%{
background-color: #FFFACD;
left: 0;
top: 200px;
}
100%{
background-color: #BBFFFF;
left: 0;
top: 0;
}
}
</style>
</head>
<body>
<div></div>
<div class="box"></div>
</body>
</html>
转载请注明：大灰牛博客 » animation动画