The wrongly placed flags vanished for 0.7 seconds
Oct 26, 2026 Β· Tech Β· νκ΅μ΄
In Minesweeper, when you hit a mine and lose, the remaining mines go off one after another and any wrongly placed flag turns into a flag with an X. But the wrong flags didn't change right away. Their picture disappeared for about 0.7 seconds and then came back as an X flag. The grass cell flickered once too.
Here is how the sequence was built. The timing of the mines going off one by one (700ms in total, divided by the number of mines) is set with a different animation-delay on each cell. The mine animation, ms-pop, starts at size 0 and pops out. I had put the same ms-pop on the wrong flags.
The problem was animation-fill-mode: backwards. It applies the first keyframe even before the animation starts, during the delay. The mine cells needed that: until their turn comes, they have to look like closed cells. But with the same rule on a wrong flag, its picture hid at size 0 until its turn came (up to 700ms). A flag that was already showing disappeared, and the grass cell flickered once.
/* before: the same pop animation as the mines, held at scale(0) until its turn */
.wrong { animation: ms-pop .3s var(--d) backwards; }
/* after: show the X flag right away, only bounce once at its turn */
.wrong { animation: ms-wrong .3s var(--d); } /* no "backwards" */
@keyframes ms-wrong { 50% { scale: 1.25; } }This is a simplified example. The fix was a separate animation just for wrong flags, ms-wrong. The X flag shows the moment the game ends and only bounces once when its turn comes. It has no starting keyframe and doesn't use backwards, so the picture stays visible while it waits for its turn.
Again I didn't trust my eyes alone. A flicker shows even if a single frame is empty, but it is easy for a person to miss. I recorded each cell's state (whether its picture was visible) on every frame with requestAnimationFrame, and confirmed that not a single frame was empty for the whole sequence.
Reusing one animation for several purposes can hide side effects like this. The backwards the mines needed did the flags harm. When the purpose is different, give it its own animation.
References
- MDN, animation-fill-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Games from this post
MinesweeperUse the number clues to open every cell without hitting a mine.
Play
More posts
- Switching a mode button made the whole board wobble Oct 26, 2026
- Minesweeper boards you can finish without guessing Oct 26, 2026
- Picking a 3D library and fitting it into a site with no build step Oct 25, 2026
- I deployed, and the old page kept showing for an hour Oct 25, 2026
- Why there is always a cloud within reach in Cloud Hop Oct 25, 2026