Попробуйте пошаговую анимацию с помощью 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.