I'm experimenting with CSS steps to create a unique visual effect resembling a "light board". The setup involves a column of 18 divs acting as individual "bulbs", with an animation that positions a div behind each one to simulate a "lit up bulb."
The keyframes I have defined are:
@keyframes strobe{
to{
transform:translateX(1800%);
}
}
The animation is configured as:
animation:strobe 2s steps(18, start) infinite;
Currently, the animation skips the initial position. I have also attempted using 0% - 100% for the keyframes without success.
How can I ensure that the initial position is included in the steps? And what might be causing this issue?
I have provided a fiddle for reference. Please note that I am still fine-tuning it for responsiveness, so the display may not show as intended with 18 divs across.