Как стать автором
Обновить

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

Время на прочтение 1 мин
Количество просмотров 28K
Автор оригинала: simurai
[иллюстрация принципа]

Если вам не хочется использовать гифы на сайте, а предпочитаете 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.
Теги:
Хабы:
+51
Комментарии 25
Комментарии Комментарии 25

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн