Question

我正在尝试通过交换3张图片的z-index来创建简单的3张图片幻灯片。在下一个图像交换之前，我给他们每个人4秒的时间。它在第一个周期工作正常，但在第一个图像不再显示之后。

<html>
<head>
<style>

.HPLIMG1 {
  z-index: 0;
  animation: move 4s linear 0s infinite alternate; 
  }
 @keyframes move {
  from { z-index: 100; }
  to { z-index: 400; }
}
.HPLIMG2 {
  z-index: 0;
  animation: move1 4s linear 4s infinite alternate; 
  }
 @keyframes move1 {
  from { z-index: 100; }
  to { z-index: 400; }
}
.HPLIMG3 {
  z-index: 0;
  animation: move2 4s linear 8s infinite alternate; 
  }
 @keyframes move2 {
  from { z-index: 100; }
  to { z-index: 400; }
}
</style>
</head>
</body>
<div>
<img src="1.png" class="HPLIMG1" style="position:relative"/>
<img src="2.png" class="HPLIMG2" style="position:relative; left:-200px; margin-right:-200px"/>
<img src="3.png" class="HPLIMG3" style="position:relative; left:-200px; margin-right:-200px"/>
</div>
</body>
</html>

正如你所看到的，我试图将每个动画的开始时间错开4秒。我已经意识到这可能是一个定时（频率）问题，因为切换z索引需要4秒钟，然后又需要4秒才能切换回来。所以现在我想知道是否有办法在一个方向上慢慢地制作动画，然后快速另一个方向？是否有更好的解决方案，例如让一个动画触发另一个或使用转换（不确定转换是否可以是时间触发而不是事件触发）。

我是CSS的新手，我在其他任何帖子中都找不到答案。

css动画不同的正时前进和后退

0 个答案: