css3动画 - 淡出问题

Question

我正在玩css3动画/过渡，我注意到我的项目中存在小问题。

来源：http://jsfiddle.net/paranoida/cuwgQ/
全屏版：http://jsfiddle.net/paranoida/cuwgQ/show

要求：Safari / Chrome

---

我想在两张幻灯片之间创建平滑的淡入淡出。我使用webkitAnimationEnd事件来创建回调。

动画持续时间幻灯片设置为 5s 拇指（进度条）有自己的持续时间（比幻灯片短1秒）= 4s 。

如果进度条动画完成，我将“当前”类添加到下一个元素。之后，如果幻灯片动画完成，我从前一个元素中删除了“当前”类。等等...

它在幻灯片1和2,3和4,5和6等之间正常工作。我不知道为什么js有幻灯片2和3,4和5的问题; / 也许这是同步问题，但我不是百分百肯定。

我的理念：
1. [0s]开始动画（第一个元素有“当前”类）
2. [4s] - 下一张幻灯片有“当前”类 3. [5s] - 从第一张幻灯片中删除“当前”类 4. [9s] - 下一张幻灯片有“当前”类 5. [10s] - 从第二张幻灯片中删除“当前”课程 6. ...

它在理论和其他课程上都比“当前”更好 示例：_http：//jsfiddle.net/paranoida/cuwgQ/18/show/ （你需要使用webinspector或firebug）

有什么想法吗？

谢谢， 拉法尔

Answer 1

您可以使用animation-delay属性来同步动画，而不是使用javascript。它可能会更顺畅。以下是我编写的演示内容：http://nimbu.in/unplugged/demos/slideshow.html

（现在动画也在FF5测试版中工作）。