Html CSS渐变动画在边缘中不起作用

我正在使用下面的方法在我的页面上创建渐变动画-但是edge似乎不喜欢它

动画在“边”中完成时，渐变将中断。它显示深蓝色。我正在使用

线性渐变

和

关键帧

播放动画

有什么想法吗？以前有人经历过吗

    .wrapper {
      align-items: center;
      background-image: linear-gradient(to right, #054f7d, #00a7cf, #efe348, #861a54, #054f7d);
      background-size: 600%;
      background-position: 0 0;
      box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.5);
      height: 100%;
      justify-content: center;
      /* Animation */
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-name: gradients;
    }

    h1 {
      color: white;
      font-size: 2.4em;
      text-align: center;
      text-transform: uppercase;
    }

    @media (max-width: 830px) {
      h1 {
        font-size: 2em;
      }
    }
    @keyframes gradients {
      0% {
        background-position: 0 0;
      }
      25% {
        background-position: 50% 0;
      }
      50% {
        background-position: 90% 0;
      }
      60% {
        background-position: 60%;
      }
      75% {
        background-position: 40%;
      }
      100% {
        background-position: 0 0;
      }
    }

---

欢迎来到SO。这将有助于看到一个屏幕截图的行为，你看到的最低限度。js提琴是另一种展示正在发生的事情的好方法。它对我来说似乎很好：实际上@Fotini Rassia是正确的。将代码复制到文件并在本地运行。不是最新的边缘浏览器，它的基础是铬，而是旧的。有人有类似的问题，看看这种方法是否适合你