Html Question posted in
Some basic documentation can be found here.

Html – CSS animation on multiple elements: resync after hover

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search