Stop Motion Animation CSS

#html #css #css3 #css_animation

Я создаю анимацию  движения бегущей кошки.
 У меня уже есть все слайды. Но, похоже, это не работает должным образом.    



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
    

Ответы

Ответ 1

На самом деле у вас 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 совместно с параллаксом фона
Анимация персонажа прыгающей девочки    
Анимация персонажа с использованием svg совместно с параллаксом фона    
Анимация пешеходных и других маршрутов на растровой карте