Include initial position with CSS Steps

Question

I'm using css steps to create a "light board" you could say. So there's a column of 18 divs that act as a "bulb". The animation moves a div behind it that acts as the "lit up bulb "

My keyframes are set as:

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

And my animation is set as:

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

Currently the animation never includes it's original position. (I also tried using 0% - 100% for the keyframes)

How can I include the initial position in the steps? And why is it currently not?

Included a fiddle for reference. Still working on responsive, so it doesn't show as 18 divs across.

https://jsfiddle.net/btxffgfj/

Answer 1

Playing around with your fiddle, I tried changing start to end and that seems to work.

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

Fiddle