CSS-анимация для нескольких элементов: повторная синхронизация после наведения ⇐ CSS

[Anonymous]

Я делаю игру, в которой вы можете нажать на блок, чтобы открыть букву. Блоки анимированы с эффектом «свечения», при котором они меняют цвет, переходя в белый цвет и возвращаясь к исходному цвету. Этот эффект длится 2 секунды и повторяется бесконечно.
При наведении курсора мыши на один из блоков блок становится красным. Моя проблема в том, что когда мышь уходит за пределы блока, анимация начинается с самого начала и может не синхронизироваться с другими блоками. Есть идеи, как синхронизировать анимацию блоков независимо от наведения мыши?
Минимальный воспроизводимый пример:

Код: Выделить всё

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; }
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/791 ... fter-hover