Html - CSS animation on multiple elements: resync after hover

RomainP
October 26, 2024
49 views
0 votes
2 Answers

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>

Answers

You can simply use background-color: red !important;…

Extra minimal and reproducible example:

const grid = document.getElementById('grid');

for (let i=0; i<4; i++) 
  {
  let row = grid.appendChild( document.createElement('div') );
  for (let j=0; j<4; j++) 
    row.append( document.createElement('div') );
  }

#grid > div {             /*  rows */
  display        : flex;
  flex-direction : row;
  }
#grid > div > div {        /* cells */
  width      : 50px;
  height     : 50px;
  background : blue;
  border     : solid 1px black;
  animation  : fade 2s ease-in-out infinite;
  }
#grid > div > div:hover {
  background : red !important;  /* <--- and no more... */
  }
@keyframes fade {
  50% { background : white; }
  }

<div id="grid"></div>

Use an extra layer with a gradient

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 {
  width: 50px;
  height: 50px;
  animation: fade 2s ease-in-out infinite;
  background-color: blue;
  border: solid 1px black;
}

.hoverable:hover {
  background-image: linear-gradient(red 0 0);
}

.row {
  display: flex;
  flex-direction: row;
}

@keyframes fade {
  50% {
    background-color: #FFFFFF;
  }
}

<div class="grid" id="grid"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS animation on multiple elements: resync after hover

Answers