纯CSS3 网站轮播图

今天抽空做了一个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]

可以运行

这里只发现了滚动会有这样的现象，图片放大没有影响。

附图一张：

show

查看地址：http://sandbox.runjs.cn/show/fx47f1cx