Попробуйте пошаговую анимацию с помощью animation-timing-function: steps().

Прежде, чем браться за спрайты, давайте сделаем вариант попроще — часы с «механической» секундной стрелкой. Для начала соберём сами часы:

/* html */
​
<div class="clock">
  <div class="hand"></div>
</div>
/* css */
​
/* Рамка часов */
.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid black;
  border-radius: 50%;
}
​        
/* "Крепление" для стрелок в центре */
.clock::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: black;
  content: '';
  transform: translate(-50%, -50%);
}
​
/* "Секундная стрелка */
.hand {
  position: absolute;
  top: 5%;
  left: 49%;
  width: 2%;
  height: 50%;
  border-radius: 2px;
  background: #000;
}

Запустим стрелку:

/* ... */
​
.hand {
  /* ... */
​
  /* Будем поворачивать стрелку на 360 градусов 
  за одну минуту равномерно и бесконечно */
  animation: spin 60s linear infinite;
​
  /* Сместим центра вращения стрелки так
  чтобы он совпал с центром часов */
  transform-origin: 50% 90%;
}
​
@keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

«Механическая» стрелка должна двигаться на равномерно, а рывками. Добиться этого нам поможет animation-timing-function: steps(). Это свойство позволяет задать количество шагов, за которое проиграется анимация. Мы хотим, чтобы стрелка делала рывок каждую секунду, поэтому на 60 секунд нужно 60 шагов:

/* ... */
​
.hand {
  /* ... */
​
  /* Вместо того, чтобы поворачивать стрелку
  равномерно, будем поворачивать её за 60 шагов */
  animation: spin 60s steps(60) infinite;
}

Теперь применим этот же способ к спрайту. Для начала соберём статичного Марио:

/* html */
​
<div class="mario"></div>
/* css */
​
.mario {
  position: relative;
  width: 32px;
  height: 64px;
  background-image: url(super-mario-sprite.png);
}

Запустим движение фона:

/* css */
​
.mario {
  /* ... */
  animation: move 1s linear infinite;
}
​
@keyframes move {
   from { background-position-x: -32px; }
   to { background-position-x: -96px; }
}

Разделим анимацию на 3 шага и ускорим. Готово:

/* css */
​
.mario {
  /* ... */
  animation: move .2s steps(2) infinite;
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы