как остановить анимацию кадров моего webkit?

Question

Я делаю небольшую анимацию, используя свойство анимации webkit. это работает, наконец, это вернулось к первому шагу. это означает, что я перемещаю объект в 200px, когда он достигнет 200px, он должен остаться, не должен возвращаться в старое состояние. как я могу зайти в конечное состояние?

мой код CSS:

 .box {
            width:100px;
            height:100px;
            background-color: black;
            -webkit-animation-duration: 4s;
            -webkit-animation-delay:5s;

            position:absolute;
        }


        @-webkit-keyframes bounce {
            from {
              left: 0px;
            }
            to {
              left: 200px;
            }
        }

Answer 1

анимированные свойства webkit возвращаются к своим первоначальным значениям после завершения анимации. (см. http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Animations/Animations.html)

вы захотите захватить конечное событие анимации с помощью слушателя и установить для свойства 'left' поля значение 200px (ваша конечная точка).

что-то вроде (использует jQuery):

<script type="text/javascript">
$(document).ready(function() {
        window.addEventListener('webkitAnimationEnd',function( event ) { $('.box').css('left', '200px'); }, false);
});
</script>

Answer 2

Попробуйте это: -webkit-animation-fill-mode: forwards;

Answer 3

Если вам нужна односторонняя анимация, я думаю, вам следует использовать Переходы Webkit .