找了好久动画写法，全是雪碧图，都没有看到过CSS真正的逐帧写法。今天有福了，看看波波写法吧。
波波写法，哈哈，从同事波波那拿来的。。马克一下！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS动画</title>
<style>
.mc {
width: 1088px;
height: 461px;
z-index: 1;
position: absolute;
animation: mymove 0.8s infinite;
-webkit-animation: mymove 1s infinite; /* Safari 和 Chrome */
-moz-animation: mymove 1s; /* Firefox */
-o-animation: mymove 1s; /* Opera */
}
@keyframes mymove
{
0% {background: url(img/mc1.png) no-repeat;}
20% {background: url(img/mc2.png) no-repeat;}
40% {background: url(img/mc3.png) no-repeat;}
60% {background: url(img/mc4.png) no-repeat;}
80% {background: url(img/mc5.png) no-repeat;}
100% {background: url(img/mc6.png) no-repeat;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {background: url(img/mc1.png) no-repeat;}
20% {background: url(img/mc2.png) no-repeat;}
40% {background: url(img/mc3.png) no-repeat;}
60% {background: url(img/mc4.png) no-repeat;}
80% {background: url(img/mc5.png) no-repeat;}
100% {background: url(img/mc6.png) no-repeat;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {background: url(img/mc1.png) no-repeat;}
20% {background: url(img/mc2.png) no-repeat;}
40% {background: url(img/mc3.png) no-repeat;}
60% {background: url(img/mc4.png) no-repeat;}
80% {background: url(img/mc5.png) no-repeat;}
100% {background: url(img/mc6.png) no-repeat;}
}
@-o-keyframes mymove /* Opera */
{
0% {background: url(img/mc1.png) no-repeat;}
20% {background: url(img/mc2.png) no-repeat;}
40% {background: url(img/mc3.png) no-repeat;}
60% {background: url(img/mc4.png) no-repeat;}
80% {background: url(img/mc5.png) no-repeat;}
100% {background: url(img/mc6.png) no-repeat;}
}
</style>
</head>
<body>
<div class="mc"></div>
</body>
</html>
网友评论