1
Я пытаюсь оживить фон элемента, который на 100% широкий и высокий. Это простая анимация CSS3, использующая шаги для прохождения спрайта.CSS3 анимация ключевого кадра на 100% ширине/высоте фоны
анимация выглядит следующим образом:
.play-intro{animation: play 2s steps(6);}
@keyframes play {
from { background-position: 0 0 ; }
to { background-position: -7800px 0 }
}
Вопрос заключается в том, что я вижу, каждое изменение спрайтов, он не работает, как это должно быть. Я не знаю, но я считаю, что это возможно из-за свойства background-size: cover. Любые советы по этому поводу?
Я создал скрипку, чтобы воссоздать этот вопрос: http://jsfiddle.net/QKwjM/1/
И это скрипка в полноэкранном режиме, проблема лучше всего видна там. http://jsfiddle.net/QKwjM/1/embedded/result/
проблема в том, что вы видите каждое изменение спрайтов? Я думаю, что изменение спрайта - это то, чего вы пытаетесь достичь !? Если я понимаю вас правильно, проблема в том, что анимация, кажется, «отстает» каким-либо образом. Вы пытались установить значения процента/шага, а не от/до? – androidavid
Он должен быть плавно анимированным. Вот почему я использую анимацию ключевого кадра. См. Это, например, http://jsfiddle.net/simurai/CGmCe/ – suludi
@Adrift Теперь он действует как слайдер, это не желаемое поведение, которое я хочу. Вы можете проверить скрипту два комментария выше или эту ссылку http://davidwalsh.name/firefox-animation, просто нажмите на просмотр демо, это также шаги основаны. – suludi