csscss-animations

Background color animation of button element with CSS

I want to animate the background color of a button infinitely using CSS animation (note, this is not CSS transition request). I use the following CSS animation which works on Firefox, but does nothing on Chrome/Edge. Why does it not work on those browsers? How do I fix it?

.entry {
  animation-name: my-anim;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes my-anim {
  from {
    background-color: cyan;
  }
  to {
    background-color: yellow;
  }
}
<button type="button" class="entry">Enter data</button>

Solution

  • Simply set an initial background value to nullify the user-agent (browser) style. It can be any valid color.

    .entry {
  animation-name: my-anim;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: none;
}

@keyframes my-anim {
  from {
    background-color: cyan;
  }
  to {
    background-color: yellow;
  }
}
    <button type="button" class="entry">Enter data</button>