I’m making a game where you can click on a block to reveal a letter. The blocks are animated with a “glowing” effect, where they change color by fading to white and back to the original color. This effect lasts 2 seconds and repeats infinitely.
When you hover the mouse on one of the blocks, the block becomes red. My problem is that, when the mouse goes away from the block, then the animation starts back from the beginning, and can become out of sync with the other blocks. Any idea to have the blocks animated in sync, independently of the mouse hovering?
Minimal reproducible example:
let grid = document.getElementById("grid");
for (i = 0; i < 4; i++){
let row = document.createElement("div");
row.className = "row";
for (j = 0; j < 4; j++){
let box = document.createElement("div");
box.className = "box";
box.classList.add("hoverable");
row.appendChild(box);
}
grid.appendChild(row);
}.box {
/*background-color: blue;*/
width: 50px;
height: 50px;
animation: fade 2s ease-in-out infinite;
border: solid 1px black;
}
.hoverable:hover {
background-color: red;
animation: 0;
}
.row {
display: flex;
flex-direction: row;
}
@keyframes fade {
0% { background-color: blue; }
50% { background-color: #FFFFFF; }
100% { background-color: blue; }
}<div class="grid" id="grid"></div>