![[иллюстрация принципа]](https://www.pvsm.ru/images/animaciya-lista so spraitami-posredstvom steps().jpg "Анимация листа со спрайтами посредством 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 шагов).
Вот небольшое демо.
