2014-01-14 2 views
0

Я пытаюсь играть спрайтов анимации с помощью CSS, используя шаги, как это: http://jsfiddle.net/simurai/CGmCe/CSS Sprite-лист анимации с Multiple Row Sprite-лист

В этой связи он в основном определяет кадры, как это:

@-webkit-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

Проблема, с которой я сталкиваюсь; мой лист спрайтов - 1309 x 910 с 30 кадрами. Каждый кадр равен 187 x 182. Таким образом, мой лист спрайтов составляет 7 кадров в первых 4 строках и 2 кадра в последней строке.

Могу ли я сделать такую ​​же анимацию, как анимация по ссылке выше, с определением самих кадров? Или мне нужно изменить спрайт и сделать его 1 ряд 30 кадров (результат 5610 x 182 лист спрайта)

+0

что вы: вы создали скрипку со своим спрайтом и попробуйте? – caramba

+0

@caramba Я попробовал это сам несколькими способами, но все, что я делаю, просто играет первую строку и игнорирует другие строки. – erkinyldz

+0

было бы проще помочь, если вы настроите скрипку и покажете, что вы пробовали. вы можете установить больше значений в background-position: ЗДЕСЬ; это фоновая позиция: xpos ypos; (x = горизонтальный, y = вертикальный). поэтому, возможно, попробуйте что-то вроде фона-позиции: -20px -50px; и посмотреть, что будет – caramba

ответ

0

Вам нужно 1 ряд. Your пример используется steps функция. Он использует количество интервалов от начала до конца. Поэтому, если в вашем спрайте несколько строк, высота (строки) не будет влиять на ширину одного шага (интервал).

+0

Не отвлекайтесь на этот ответ. Это возможно, используя два одновременных 'steps()' 'd' @ keyframes': один для цикла по столбцам, другой для строк. stackoverflow.com/a/22575868/1489243 сделал это и прекрасно объяснил это. И техника иногда полезна, из-за странной неспособности Firefox поддерживать образы над 32766px в любом измерении: support.mozilla.org/en-US/questions/973667. –

Смежные вопросы