Html 使用css3在连续循环中设置Z索引动画

我正在尝试使用z索引连续、有序地循环divs A、B、C、D，但我无法获得正确的时间

我有一支密码笔

任何帮助都将不胜感激

---

谢谢

CSS3动画在某些浏览器中还没有脱离“实验”阶段。如您所见，WebKit浏览器（包括Opera）仍然需要前缀才能正常工作。我假设您正在一个需要

-webkit-

前缀的浏览器中测试它。当我在Firefox中打开该页面时，它可以完美地工作

我添加了使动画在所有浏览器中都能工作的前缀

---

我意识到这不是你问题的答案，但如果你想在任何地方发布它，这是一个非常严重的问题。

我无法为

alternate

动画找到正确的时间，但这里有一个工作循环，它工作得很好，但没有交替：

变化：

• 动画：移动4s线性无限->
  动画：移动16秒线性无限

• .block-b{动画延迟：4s；}

  ->`.block-b{动画延迟：8s；}

• .block-c{动画延迟：8s；}

  ->`.block-b{动画延迟：12s；}

• .block-d{动画延迟：12s；}

  ->`.block-b{动画延迟：16s；}

此外，我还添加了一个额外的关键帧，以便动画仅在动画结束时开始更改z索引，以获得更好的计时效果：

@keyframes move {
  0% { z-index: 0; }
  50% { z-index: 0; }
  100% { z-index: 10; }
}

---

我希望这对你来说已经足够好了。我无法让它在交替方向上正常工作

你说的“我无法正确计时”是什么意思？@kleffeund我假设div没有以正确的顺序显示。重要提示-不能在firefox中设置z索引动画@LorDex我测试了这个代码笔链接，它在Firefox中运行得很好。我的意思是它的动画不像1-2-3-4-5-6-7-8-9-10-只有1-10请参考-部分“需要注意的其他事项”谢谢Joetje50，它工作得很好，这正是我想要它做的。我喜欢你的mineturtle顺便说一句：）谢谢，我知道厂商的前缀，但我认为没有它们阅读起来会更容易，但下次我在提问时会把它们都带上。；）