Почему положение фона не влияет на мой градиент?

Я хотел сделать простую анимацию 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?

используя% все позиции эквивалентны, потому что размер по умолчанию 100% .. измените размер фона, и он начнет двигаться

— 13.07.2018 21:40

проверьте это: css-tricks.com/i-like-how-percentage-background-position-wor‌ ks

— 13.07.2018 21:44

а это: sitepoint.com/css-using-percentages-in-background-image

— 13.07.2018 21:45

Я согласен с @TemaniAf, если вам следует изменить размер

— 13.07.2018 21:47

@TemaniAfif Спасибо за объяснение! Связанный ответ решает проблему, но не объясняет ее.

— 14.07.2018 00:04

да не смог найти нужный мне дубликат ... непросто: p. Кстати, нужные вам объяснения находятся в ссылках, которыми я поделился;)

— 14.07.2018 00:05

css css-animations background-position

13.07.2018 21:37

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...