css3 动画 - 褪色

Question

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

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

要求：Safari / Chrome

---

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

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

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

它在幻灯片 1 和 2、3 和 4、5 和 6 等之间运行良好。我不知道为什么 js 与幻灯片 2 和 3、4 和 5 有问题；/ 也许是同步的问题，但我不是 100% 确定。

我的概念：

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 测试版中使用）。