为什么背景位置不影响我的渐变？

Question

我想为加载栏制作简单的CSS3动画。我用repeating-linear-gradient做成了一些有角度的条纹。我希望他们无限前进。

div {

    background-image: repeating-linear-gradient(-40deg, #bf2e38 0em, #a42830 0.01em, #a42830 2em,#bf2e38  2em, #bf2e38 4em); 
    background-position: 0% 0%;
    -webkit-animation: AnimationName 5s linear infinite;
    -moz-animation: AnimationName 5s linear infinite;
    animation: AnimationName 5s linear infinite;
}

@keyframes AnimationName {
    0%{background-position:0% 0%}
    50%{background-position:50% 0%}
    100%{background-position:100% 0%}
}

<div>test</div>

但是在我的浏览器中，它显示为静态对象。

奇怪的是，当我将图像用作背景时，它可以工作：

div {

    background-image: url("https://caniuse.com/img/browserstack.svg");

    background-position: 0% 0%;
    -webkit-animation: AnimationName 5s linear infinite;
    -moz-animation: AnimationName 5s linear infinite;
    animation: AnimationName 5s linear infinite;
}

@keyframes AnimationName {
    0%{background-position:0% 0%}
    50%{background-position:50% 0%}
    100%{background-position:100% 0%}
}

<div>Test using icon</div>

那么，如何以动画方式对渐变进行动画处理？为什么浏览器会忽略background-position？