html - 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. ...

它在理论上和除“current”之外的其他类别上工作正常。
示例:_ http://jsfiddle.net/paranoida/cuwgQ/18/show/ (需要使用webinspector或者firebug)

有什么想法吗？

Answer 1

您可以使用 animation-delay 属性来同步您的动画，而不是使用 javascript。可能会顺畅很多。这是我写的演示这个的东西:http://nimbu.in/unplugged/demos/slideshow.html

(动画现在也适用于 FF5 测试版)。