7

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

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; }
}
<div></div>

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

4
  • ассоциация: stackoverflow.com/q/27835008/7394871 14 авг 2017 в 19:30
  • 1
    Это простой перевод вопроса? Зачем?
    – NTP
    14 авг 2017 в 19:33
  • 1
    @Erm ключевое слово здесь - ассоциация Посмотрите на Мете зачем это делается. ru.meta.stackoverflow.com/… 14 авг 2017 в 19:37
  • 2
    Теперь понятно, спасибо)
    – NTP
    14 авг 2017 в 19:38

1 ответ 1

7

На самом деле у вас 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; }
}
<div></div>

перевод ответа @The Pragmatick

Примечание переводчика: Мне очень понравилось данное решение - минимальное количество кода и эффектно выглядит. Тут добавить еще бы параллакс бэкграунда.

Я слежу за другими решениями подобных задач. Приведу несколько примеров:

Примеры анимации персонажей

  1. Идущий человек на фоне города

  2. Шериф

  3. Бегущий человек

  4. Мультяшный герой

  5. Собака

  6. Бегущий человек, есть возможность менять предметы в его руке

  7. Бегущая лошадка

  8. Бегущий волк

  9. Прогулка скелета made by hand! @HamSter

  10. Анимация с использованием svg совместно с параллаксом фона

  11. Анимация персонажа прыгающей девочки

  12. Анимация персонажа с использованием svg совместно с параллаксом фона

  13. Анимация пешеходных и других маршрутов на растровой карте

2
  • и стоило это переводить?)) больше похоже "Вопрос вызван проблемой, которая больше не воспроизводится, или опечаткой" 14 авг 2017 в 19:36
  • 1
    @Алексей Шиманский Мне очень понравилась тема Я довольно плотно думал, как её решить. Вот мои попытки svg-art.ru/files/animation/viewBox-translate/… а тут всё просто и эффектно решается, так что сорри 14 авг 2017 в 19:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.