Анимация листа со спрайтами посредством steps()

Если вам не хочется использовать гифы на сайте, а предпочитаете PNG за их лучшую цветность, но всё же нужно анимировать их, тогда вот способ:

у анимаций CSS с ключевыми кадрами есть свойство под названием animation-timing-function. Одна из его возможностей — использовать функцию steps(), как в нижеследующем примере:

div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}

Различие между нею и остальными анимационными функциями состоит в том, что вместо плавного движения от 0px к −500px происходят резкие прыжки с паузами между ними. Это идеально подходит для анимаций, использующих лист с покадровым изображением спрайта. В вышеприведённом примере шаг равен 50px, а пауза — 100 миллисекунд (всего 10 шагов).

Вот небольшое демо.

Как видите, можно менять скорость воспроизведения анимации, что весьма радует, но есть и проблема: анимация всегда начинается с первого кадра и выглядит дёрганою. Я пробовал также анимировать длительность анимации (наследованием от родительского элемента), но, к сожалению, это не поддерживается. Так что, думаю, если вам понадобится более динамическое управление скоростью (анимирование анимации), то всё равно придётся прибегнуть к джаваскрипту.

Постскриптум.  Нашёл реальный пример употребления этого приёма: логотип Impending.

Автор: Mithgol

Источник