Use Element.animate() to change background-color

Question

Trying to use Element.animate() to change background-color , to mimic refresh effect.

Code:

  const blinkOnPage = (id) => {
    document.getElementById(id).animate(
        [
          {"background-color": '#def', color: '#def'},
        ], {
          easing: 'ease-in-out',
          duration: 200
        });
  }

In my test, color works, but background-color doesn't, how to fix it?

Answer 1

Never mind, just found the solution:

Change background-color to background works.

  const blinkOnPage = (id) => {
    document.getElementById(id).animate(
        [
          {background: '#def', color: '#def'},
        ], {
          easing: 'ease-in-out',
          duration: 100
        });
  }