Предоставляет ли фоновая позиция на анимацию остановки изображения?

Question

Demo

.move 
 
{ 
 
    background-image: url("http://placehold.it/100x100"); 
 
    width: 100%; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    animation: move 1s linear infinite; 
 
} 
 

 
@keyframes move 
 
{ 
 
    from{background-position: 0, 0} 
 
    to{background-position:200%,200%} 
 
} 
 
@-webkit-keyframes move 
 
{ 
 
    from{background-position: 0, 0} 
 
    to{background-position:200%,200%} 
 
}

<div class="move"> </div>

Просто удалите background-size в скрипку и увидеть его. Почему это влияет на анимацию?

EDIT Если я изменить в анимации to some pixels, say 200px это работает to.

Я попытался добавить conde-фрагмент с помощью SOS CodeSnippet. Я не мог. Кто-нибудь, пожалуйста, сделайте это?

Answer 1

Ваша проблема background-size: попробуйте установить ее на 100px, 100px, и вы увидите анимацию.

Адрес my fiddle.

Answer 2

Просто измените свое процентное значение на viewport percentage lengthsvh & vw.

.move 
 
{ 
 
    background-image: url("http://placehold.it/100x100"); 
 
    width: 100%; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-size: 100vw 100vh; 
 
    animation: move 1s linear infinite; 
 
} 
 

 
@keyframes move 
 
{ 
 
    from{background-position: 0 0} 
 
    to{background-position: 200vw 200vh} 
 
} 
 
@-webkit-keyframes move 
 
{ 
 
    from{background-position: 0 0} 
 
    to{background-position:200vw 200vh} 
 
}

<div class="move"> </div>

Answer 3

Фон размером 100% не может быть перемещен со свойствами процент позиции (это не интуитивно, я знаю ...)

Фон-позиция в процентах наборов точка, в которой соответствует процентное соотношение фона и процент от размеров контейнера.

Если размер 100%, любая выбранная вами точка дает конечную позицию

Но это не связано с анимацией, оно связано с позиционированием как таковым