Stop Motion Animation CSS

Я создаю анимацию движения бегущей кошки. У меня уже есть все слайды. Но, похоже, это не работает должным образом.
div { animation: run 1s steps(10) infinite; -webkit-animation: run 1s steps(10) infinite; background: url(https://i.stack.imgur.com/zl4Tr.png) 0 0; background-repeat: no-repeat; height: 200px; width: 400px; } @keyframes run { 0% {background-position: 100% 0; } 100% {background-position: 100% -2591px; } } @-webkit-keyframes run { 0% {background-position: 100% 0; } 100% {background-position: 100% -2591px; } }

Перевод вопроса: Stop Motion Animation CSS @imbaktu

Ответ

На самом деле у вас 13 слайдов.
Поэтому установите тринадцать шагов steps(13)
div { animation: run 1s steps(13) infinite; -webkit-animation: run 1s steps(13) infinite; background: url(https://i.stack.imgur.com/zl4Tr.png) 0 0; background-repeat: no-repeat; height: 200px; width: 400px; } @keyframes run { 0% {background-position: 100% 0; } 100% {background-position: 100% -2591px; } } @-webkit-keyframes run { 0% {background-position: 100% 0; } 100% {background-position: 100% -2591px; } }

перевод ответа @The Pragmatick
Примечание переводчика: Мне очень понравилось данное решение - минимальное количество кода и эффектно выглядит. Тут добавить еще бы параллакс бэкграунда.
Я слежу за другими решениями подобных задач. Приведу несколько примеров:
Примеры анимации персонажей
Идущий человек на фоне города Шериф Бегущий человек Мультяшный герой Собака Кошка, которая гуляет сама по себе Бегущий человек, есть возможность менять предметы в его руке Бегущая лошадка Бегущий волк Прогулка скелета made by hand! @HamSter Анимация с использованием svg совместно с параллаксом фона Анимация персонажа прыгающей девочки