html - CSS 定时器分步执行 Action

Question

我不确定我所要求的是否可以完成。如果不能，那就是答案。

编辑:下面的例子是一个具体案例。然而，我的问题主要是如何分步而不是逐步地做任何事情。

如何在没有 JavaScript 的情况下使用 CSS 逐步滚动 div？即我拥有的是一个 div，其宽度是其容器 div 的 3 倍，我希望容器每隔几秒滚动一次内部 div。首先显示第一个第三个，然后是第二个，然后是第三个，然后返回到第一个。等等。

<div style="width:100%; height:100px;  overflow-y:hidden; overflow-x:auto; ">
    <div style="width:300%; height:100px;">abc</div>
</div>

我正在研究动画，但那似乎是为了逐渐移动。有没有办法让它像我上面概述的那样“跳跃”？

Answer 1

我不太确定这是否有帮助，但您可以在关键帧中使用百分比来获得类似的效果，例如您可以将其应用于画廊。 所以这里的计时器是 9 除以 3。

.box {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 9s infinite;
    animation: mymove 9s infinite;
}

@-webkit-keyframes mymove {
    0% {left: 0px;}
    20%{left: 0px;}
    40% {left: 100px;}
    60%{left:100px;}
    80%{left:200px;}
    100% {left: 200px;}
}

@keyframes mymove {
    0% {left: 0px;}
    20%{left: 0px;}
    40% {left: 100px;}
    60%{left:100px;}
    80%{left:200px;}
    100% {left: 200px;}
}

<div class="box"></div>