包含CSS步骤的初始位置

Question

我正在使用css步骤创建一个你可以说的“灯板”。 因此，有一个由18个div组成的列作为“灯泡”。 动画在它后面移动一个div作为“点亮的灯泡”

我的关键帧设置为：

@keyframes strobe{
    to{
        transform:translateX(1800%);
    }
}

我的动画设为：

animation:strobe 2s steps(18, start) infinite;

目前，动画从未包含它的原始位置。 （我也试过使用0％ - 100％的关键帧）

如何在步骤中包含初始位置？为什么它目前不是？

包括一个小提琴供参考。仍然致力于响应，因此它不会显示为18个div。

https://jsfiddle.net/btxffgfj/

Answer 1

玩弄你的小提琴，我尝试将start更改为end，这似乎有效。

animation:strobe 2s steps(18, end) infinite;

Fiddle