html - 使用 css3 在连续循环中动画 Z-index

Question

我正在尝试使用 z-index 连续并按顺序循环 div A、B、C、D，但我无法获得正确的时间。

我有一个codepen here

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

我无法为 alternate 动画安排正确的时间，但这里有一个完美的工作循环，但没有交替:

http://codepen.io/anon/pen/wtqLA

变化:

• 动画:移动 4s 线性无限； -> 动画:移动 16s 线性无限；
• .block-b {animation-delay: 4s;} -> `.block-b {animation-delay: 8s;}
• .block-c {animation-delay: 8s;} -> `.block-b {animation-delay: 12s;}
• .block-d {animation-delay: 12s;} -> `.block-b {animation-delay: 16s;}

我还添加了一个额外的关键帧，以便动画仅在动画结束时才开始更改 z-index，以便更好地计时:

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

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