CSS动画在Microsoft Edge中流畅，但在Firefox / Chrome中不流畅

Question

我想创建一个简单的灯光动画。这是我的代码：

我的HTML只有一个div

它的过渡在Edge浏览器中是平滑的，但在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中，过渡不顺利。我需要帮助！

感谢您的阅读！谢谢一百万！