今天抽空做了一个css3的轮播图，都是用的最简单的动画，这次练习的关键在于 所有的动画时间都是一样的，然后更具动画过程中的百分比进行滚动和其他的判断。
只检测了google浏览器和火狐浏览器。
在火狐浏览器中有一点需要指出，在我没有设置动画为100%时动画是无效的，比如:
[codesyntax lang="css"]
@keyframes sta1{
0%{
left: 0px;
}
10%{
left: 0px;
}
20%{
left: 0px;
}
30%{
left: -900px;
}
}
[/codesyntax]
上面无效，不能运行
[codesyntax lang="css"]
@keyframes sta1{
0%{
left: 0px;
}
10%{
left: 0px;
}
20%{
left: 0px;
}
30%{
left: -900px;
}
100%{
left: -900px;
}
}
[/codesyntax]
可以运行
这里只发现了滚动会有这样的现象，图片放大没有影响。
附图一张：
