Анимация ключевого кадра CSS3: завершение и пребывание на последнем кадре

Я столкнулся с некоторыми трудностями, пытаясь воспроизвести анимацию ключевого кадра CSS3 и связать соответствующий элемент с последним кадром после завершения анимации. По моему мнению, свойство, которое я должен установить для этого, должно быть режимом анимации-fill, который должен иметь значение forward; это ничего не делает.

.animatedSprite { 
    .animation-name: sprite;
    .animation-duration: .5s;
    .animation-iteration-count: 1;
    .animation-direction: normal; 
    .animation-timing-function: steps(3); 
    .animation-fill-mode: forwards;
    //Vendor prefixes... }

Это просто воспроизведет анимацию один раз, а затем вернется к первому кадру. Я нашел пример анимации ключевого кадра в JSFiddle (http://jsfiddle.net/simurai/CGmCe/), а изменение режима заполнения для переходов и установка количества итераций в 1 ничего там не сделают, или.

Любая помощь будет принята с благодарностью.

Ответы

Ответ 1

animation-fill-mode:forwards - это правильное свойство. Кажется, что это не работает, потому что фон изображения спрайтов имеет по умолчанию background-repeat:repeat, поэтому последний кадр, который, как вы думаете, вы видите, на самом деле является первым кадром повторяющегося фона изображение.

Если вы установили

background: url("http://files.simurai.com/misc/sprite.png") no-repeat

animation: play .8s steps(10) forwards;

@keyframes play {
    from { background-position:    0px; }
    to { background-position: -500px; }
}

и запустите демоверсию, последний кадр теперь пуст, поэтому forwards делает то, что он должен делать. Вторая часть решения - изменить окончательные свойства to и steps CSS, чтобы правильно позиционировать фон. Поэтому нам действительно нужно, чтобы фон останавливался на -450px и использовал шаги 9.

-webkit-animation: play .8s steps(9) forwards;

@keyframes play {
    from { background-position: 0; }
    to { background-position: -450px; }
}

См. демонстрацию - я установил только свойства Chrome. Также здесь изображено изображение образца в случае исчезновения оригинала.

Волнистый спрайт

.hi {
    width: 50px;
    height: 72px;
    background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat;
    
    -webkit-animation: play .8s steps(9) forwards;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(9) forwards;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}
<div class="hi"></div>

Ответ 2

Измените "бесконечный" на "1" в css, это исправляет его для меня

Ответ 3

Следующий код заставит переход оставаться на последнем кадре:

-webkit-timing-function:ease;
-webkit-iteration-count:1;