Как показать части спрайта с ключевыми кадрами CSS для создания анимации?

Я ориентируюсь на старый веб-браузер QT Webkit, который, к сожалению, не поддерживает изменение фонового изображения в ключевых кадрах. Итак, вместо этого я создал спрайт, объединив все 12 кадров, и теперь пытаюсь просмотреть каждый кадр с некоторым интервалом для создания анимации. Но у меня есть горизонтальный спрайт, и когда я пытаюсь изменить background-position-x на каком-то ключевом кадре%, он скользит.

Спрайт: http://i.imgur.com/krQPw.png

Пример: http://jsbin.com/amoxef/1 (я увеличил продолжительность анимации, чтобы увидеть, что Первоначально я бы хотел, чтобы он был установлен на 1 секунду для полного цикла анимации).

Как мне сделать так, чтобы он «прыгал», а не скользил к следующему кадру (местоположение в спрайте)?


css css-animations sprite
person Sherzod    schedule 06.01.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы должны проверить опцию steps() в ключевых кадрах CSS.

Вот пример, который я не тестировал... просто демонстрация использования steps()... Подробнее здесь: Выполнение шагов() с анимацией CSS.

#loader{
    border: 2px black solid;
    width: 800px;
    height: 480px;
    background: url('http://i.imgur.com/krQPw.png?1');
    background-position: 0px 0px;
    background-repeat: no-repeat;

    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;

}

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

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}
person Skuli Axelson    schedule 06.01.2013
comment
Отлично работает, и на самом деле ваше решение мне больше нравится из-за более чистого кода :) Решение для моего примера: jsbin.com/amoxef /9 - person Sherzod; 07.01.2013
comment
Великолепно! Как раз то, что я искал. - person davidchambers; 09.05.2013

arrow_upward
1
arrow_downward

Наконец-то получилось: http://jsbin.com/amoxef/6

Я сделал так, чтобы он оставался в одном и том же месте, например, от 0% до 7,999%, а при 8% он менял background-position. Таким образом, поскольку фактический период изменения настолько мал, он выглядит так, как будто он «перескакивает» к следующему кадру и остается на нем до следующего определенного кадра %.

person Sherzod    schedule 06.01.2013