CSS3 Keyframe animation not working

I'm trying to animate my background so that the colours move across the screen like a gradient but for some reason the animation doesn't work on any browser. The beginning gradient appears but the animation doesn't actually work.

CSS:

.background {
    height: 100vh;
    width: 100%;
    background-position: center;
    position: absolute;

    background: linear-gradient(228deg, #df1bff, #1cbff0, #42e689, #b264fd, #4be6d3);
    background-size: 1000% 1000%;

    -webkit-animation: bgAnimate 60s ease infinite;
    -moz-animation: bgAnimate 60s ease infinite;
    -o-animation: bgAnimate 60s ease infinite;
    animation: bgAnimate 60s ease infinite;

    @-webkit-keyframes bgAnimate {
        0%{background-position:93% 0%}
        50%{background-position:0% 100%}
        100%{background-position:93% 0%}
    }
    @-moz-keyframes bgAnimate {
        0%{background-position:93% 0%}
        50%{background-position:0% 100%}
        100%{background-position:93% 0%}
    }
    @-o-keyframes bgAnimate {
        0%{background-position:93% 0%}
        50%{background-position:0% 100%}
        100%{background-position:93% 0%}
    }
    @keyframes bgAnimate { 
        0%{background-position:93% 0%}
        50%{background-position:0% 100%}
        100%{background-position:93% 0%}
    }
}