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

Question

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

Может кто-нибудь, пожалуйста, объясните мне, почему эта анимация сохраняет только возврат к первому кадру? Спасибо!

Вот код, у меня есть на данный момент:

.tree-right { 
-webkit-animation: treeright 2.0s steps(29); 
-moz-animation: treeright 2.0s steps(29); 
-ms-animation: treeright 2.0s steps(29); 
-o-animation: treeright 2.0s steps(29); 
animation: treeright 2.0s steps(29); 
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards; 
animation-fill-mode:forwards; 
} 


@-webkit-keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 

} 

@-moz-keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 
} 

@-ms-keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 
} 

@-o-keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 
} 

@keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 

} 

Answer 1

Без дополнительной информации ее трудно оценить то, что корневая проблема, тем не менее вы пытались установить ограничение на итерации к 1?

-webkit-animation-iteration-count: 1; 
     -moz-animation-iteration-count: 1; 
     -o-animation-iteration-count: 1; 
      animation-iteration-count: 1; 

Answer 2

Я бы сказал, что он работает нормально.

Я подготовил тыс скрипки,

[http://jsfiddle.net/vals/REkbW/]

копирования кода, и изменяя только анимацию из фона позиции для фона цвета проверьте его легко (и потому, что у меня нет фонового изображения); она работает нормально для меня

Answer 3

Я заметил это иногда работает только для элементов, которые являются позицией: абсолютная

Надеются, что это работает для вас!

Answer 4

Здесь последний кадр, который вы имеете в виду, находится в фоновой позиции: -5310px; вы можете остановиться в том же положении, используя -webkit-animation-fill-mode: forwards ;.

Для уточнения разъяснений. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Надеюсь, что это сработает.

Answer 5

Используйте steps(28), если у вас есть 29 кадров и для использования офсетного фона 28*(height of your frames). I just figured this out. Кроме того, для свойства background-position требуется два значения. Я полагаю, вы всегда должны указывать смещения X и Y.

JSFiddle example