CSS анимация плавная в Microsoft Edge, но не в Firefox / Chrome

Question

Я хочу создать простую световую анимацию. Вот мой код:

Мой HTML имеет только один div

Его переход плавный в браузере Edge, но не в OK в Firefox / Chrome. Любая помощь будет оценена.

Спасибо за чтение! Спасибо миллион!

.button {
  width: 300px;
  height: 40px;
  margin: 30px auto;
  border: none;
  border-radius: 30px;
  background: red;
}

.button:hover {
  cursor: pointer;
  -webkit-animation: light 400ms linear;
  -moz-animation: light 400ms linear;
  animation: light 400ms linear;
}

@-webkit-keyframes light {
  0% {
    background: linear-gradient(145deg, #f00 -40%, white 0%, #f00 40%);
  }
  100% {
    background: linear-gradient(145deg, #f00 60%, white 100%, #f00 140%);
  }
}

@-moz-keyframes light {
  0% {
    background: linear-gradient(145deg, #f00 -40%, white 0%, #f00 40%);
  }
  100% {
    background: linear-gradient(145deg, #f00 60%, white 100%, #f00 140%);
  }
}

@keyframes light {
  0% {
    background: linear-gradient(145deg, #f00 -40%, white 0%, #f00 40%);
  }
  100% {
    background: linear-gradient(145deg, #f00 60%, white 100%, #f00 140%);
  }
}

<div class="button"></div>

<div class="button"></div>

-> И мой CSS:

.button{
    width: 300px;
    height: 40px;
    margin: 30px auto;
    border: none;
    border-radius: 30px;
    background: red;
}


.button:hover {
    cursor: pointer;
    -webkit-animation: light 400ms linear;
    -moz-animation: light 400ms linear;
    animation: light 400ms linear;
}

@-webkit-keyframes light{
    0% {
        background: linear-gradient(145deg, #f00 -40%, white 0%, #f00 40%);
    }
    100%{
        background: linear-gradient(145deg, #f00 60%, white 100%, #f00 140%);
    }
} 

@-moz-keyframes light{
    0% {
        background: linear-gradient(145deg, #f00 -40%, white 0%, #f00 40%);
    }
    100%{
        background: linear-gradient(145deg, #f00 60%, white 100%, #f00 140%);
    }
} 

@keyframes light{
    0% {
        background: linear-gradient(145deg, #f00 -40%, white 0%, #f00 40%);
    }
    100%{
        background: linear-gradient(145deg, #f00 60%, white 100%, #f00 140%);
    }
} 

Мой код просто так. Его переход плавный в браузере Edge, но не в порядке в Firefox / Chrome. Мне нужна помощь !!

Спасибо за чтение! Спасибо миллион!