Why doesn't background-position affect my gradient?

Question

I wanted to make simple CSS3 animation for a loading bar. I used repeating-linear-gradient to make some angled stripes. I would like them to move forward infinitely.

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>

But in my browser it shows as static object.

Curiously, it works when I use an image as background instead:

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>

So how to animate the gradient the way image is animated? Why does browser ignore background-position?