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

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

2

Answers


  1. 0

    Add appearance: none; to the button’s CSS.

    Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

    Please note that you will then have to re-style the button according to your requirements.

    .entry {
  appearance: none;
  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>
    Login or Signup to reply.
  2. 0

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

Back To Top
Search