Воспроизвести анимацию css3 sprite один раз и удерживать последний кадр

Question

У меня есть анимация спрайта, которую я хотел бы сыграть один раз, закончить и удерживать последний кадр. Я попытался изменить счетчик итераций на 1 и добавил вперед в режим заполнения, но не работал. Любая информация или идеи помогут.

Я использую этот метод css3 sprite. http://jsfiddle.net/simurai/CGmCe/light/

-webkit-animation: crouch 1.2s steps(2, end) 1;

Answer 1

Это то, что нужно для режима заполнения. Добавьте ключевое слово both к вашему определению анимации, и, когда анимация остановится, он должен «зависнуть» на последнем кадре и оставаться таким образом.

EDIT: Я вижу, что происходит. Анимация в этом примере на самом деле идет слишком далеко от одного кадра. Вам необходимо изменить ключевой кадр to на -450px и опустить число шагов до 9, а также добавить ключевое слово both.

Отметьте, что -ms-animation никогда не существовало, и ни -o-animation, ни -moz-animation больше не нужны. Это всего лишь animation и -webkit-animation.

Answer 2

Там нет никакого способа, чтобы остановить анимацию на последнем кадре без некоторого JavaScript (или вы могли бы просто использовать спрайт анимации инструментарий

Вы должны использовать JavaScript, чтобы:.

1. Испытание, если стиль применяется к элементу background-position == 500px. Это может быть или не быть прямым. Можем ли мы запустить событие с атрибутом, измененным с помощью javascript? Если нет, вам придется неоднократно тестировать его, используя imer
2. Установите animation-play-state:paused на вышеуказанное условие, используя javascript.

ИЛИ:

Вы можете найти некоторые спрайт анимационные сценарии, которые там не будет, без сомнения, позволит значительно больший контроль над анимацией.

UPDATE:.

Чтобы сделать tesing атрибута проще (без использования setInterval - он использует некоторые интересные трюки - вы можете использовать плагин для JQuery

Существует SO question about mutation events here