анимация CSS3 не останавливается на последнем кадре

Question

У меня проблема с тем, что моя анимация спрайтов не остановится в последнем кадре - я изменил animation-iteration-count на «1», а также изменил animation-fill-mode на «вперед», но он, похоже, не работает.

Анимация не возвращается к первому кадру, она проходит до конца, а затем возвращается к первому кадру в последней строке листа спрайта.

Так что я чувствую, что я почти там, но, может быть, я что-то упустил?

Я привел пример для демонстрации.

.container { 
 
    width: 64px; 
 
    height: 64px; 
 
    position: relative; 
 
} 
 

 
@-webkit-keyframes spritex { 
 
    0% { 
 
    background-position-x: 0%; 
 
    background-position-y: 0%; 
 
    } 
 
    20% { 
 
    background-position-x: -500%; 
 
    background-position-y: 0%; 
 
    } 
 
    20.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: -100%; 
 
    } 
 
    40% { 
 
    background-position-x: -500%; 
 
    background-position-y: -100%; 
 
    } 
 
    40.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: -200%; 
 
    } 
 
    60% { 
 
    background-position-x: -500%; 
 
    background-position-y: -200%; 
 
    } 
 
    60.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: -300%; 
 
    } 
 
80% { 
 
    background-position-x: -500%; 
 
    background-position-y: -300%; 
 
    } 
 
    
 
    80.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: -400%; 
 
    } 
 
    99.99% { 
 
    background-position-x: -500%; 
 
    background-position-y: -400%; 
 
    } 
 
    100% { 
 
    background-position-x: -500%; 
 
    background-position-y: -400%; 
 
    } 
 
} 
 

 
.sprite { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png); 
 
    background-size: 500% 500%; 
 
    -webkit-animation: spritex 3s steps(5) 1; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation: spritex 3s steps(5) 1; 
 
    animation-fill-mode: forwards; 
 
} 
 
}

<div class="container"> 
 
<div class="sprite"></div> 
 
</div>

(View in Codepen)

Answer 1

Есть на самом деле две проблемы. Во-первых, у вас есть ошибка «один за другим» с функцией шага. Начальное положение не должно включаться в число шагов, переданных функции шага.

От MDN:

steps(4, end)

Вторая проблема заключается в том, что вы, кажется, имеют неправильное представление о том, какой процент значения в background-position представляют. Опять же, из MDN:

Фон-позиционный CSS свойство устанавливает начальное положение, по отношению к слою фона положения, определенного фона происхождения для каждого определенного фонового изображения.

[...]

Проценты относятся к размеру области фона позиционирования минус размера фонового изображения; Размер относится к ширине для горизонтальных смещений и высоты для вертикальных смещений

В этом случае, «размер фонового позиционирования области» является размером всего спрайта листа, а «размером фона image "- это размер одного изображения на этом листе. Так что в этом случае это означает, что 100% равно ширине ровно 4 пробелов в листе спрайта (5 - 1), и поэтому 25% равно ширине ровно одного пространства в листе спрайта.

Это означает, что background-position-x: -500%; background-position-y: -400%; не тот, где вы думаете.Вот почему спрайт, отображаемый в конце анимации, неверен.

Так положить все эти знания вместе, мы в конечном итоге с этим:

.container { 
 
    width: 64px; 
 
    height: 64px; 
 
    position: relative; 
 
} 
 

 
@-webkit-keyframes spritex { 
 
    0% { 
 
    background-position-x: 0%; 
 
    background-position-y: 0%; 
 
    } 
 
    20% { 
 
    background-position-x: 100%; 
 
    background-position-y: 0%; 
 
    } 
 
    
 
    20.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: 25%; 
 
    } 
 
    40% { 
 
    background-position-x: 100%; 
 
    background-position-y: 25%; 
 
    } 
 
    
 
    40.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: 50%; 
 
    } 
 
    60% { 
 
    background-position-x: 100%; 
 
    background-position-y: 50%; 
 
    } 
 
    
 
    60.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: 75%; 
 
    } 
 
    80% { 
 
    background-position-x: 100%; 
 
    background-position-y: 75%; 
 
    } 
 
    
 
    80.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: 100%; 
 
    } 
 
    99.99% { 
 
    background-position-x: 100%; 
 
    background-position-y: 100%; 
 
    } 
 

 
    100% { 
 
    background-position-x: 100%; 
 
    background-position-y: 100%; 
 
    } 
 
} 
 

 
.sprite { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png); 
 
    background-size: 500% 500%; 
 
    -webkit-animation: spritex 3s steps(4) 1; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation: spritex 3s steps(4) 1; 
 
    animation-fill-mode: forwards; 
 
}

<div class="container"> 
 
    <div class="sprite"></div> 
 
</div>

(View in Codepen)

Answer 2

Ваши позиции не являются правильными. Правильные позиции не должны превышать 100%.

Это являются правильными

.container { 
 
    width: 64px; 
 
    height: 64px; 
 
    position: relative; 
 
} 
 

 
@-webkit-keyframes spritex { 
 
    0% { 
 
    background-position-x: 0%; 
 
    background-position-y: 0%; 
 
    } 
 
    20% { 
 
    background-position-x: 100%; 
 
    background-position-y: 0%; 
 
    } 
 
    20.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: 25%; 
 
    } 
 
    40% { 
 
    background-position-x: 100%; 
 
    background-position-y: 25%; 
 
    } 
 
    40.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: 50%; 
 
    } 
 
    60% { 
 
    background-position-x: 100%; 
 
    background-position-y: 50%; 
 
    } 
 
    60.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: 75%; 
 
    } 
 
80% { 
 
    background-position-x: 100%; 
 
    background-position-y: 75%; 
 
    } 
 
    80.01% { 
 
    background-position-x: 0%; 
 
    background-position-y: 100%; 
 
    } 
 
    100% { 
 
    background-position-x: 100%; 
 
    background-position-y: 100%; 
 
    } 
 
} 
 

 
.sprite { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png); 
 
    background-size: 500% 500%; 
 
    -webkit-animation: spritex 3s steps(4) 1; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation: spritex 3s steps(4) 1; 
 
    animation-fill-mode: forwards; 
 
} 
 
}

<div class="container"> 
 
<div class="sprite"></div> 
 
</div>