CSS gradient animation not working in edge

I'm using the following to create a gradient animation on my page - but edge doesn't seem to like it.

When the animation completes in Edge, the gradient breaks. It displays dark blue. I'm using linear-gradient and keyframes to play through the animation.

Any ideas? Has anyone experienced this before?

    .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;
      }
    }

Screenshot