как остановить CSS анимацию без JavaScript

Question

Это jsFiddle . Что бы я хотел - это остановить коробку, когда она достигнет своей конечной позиции. Я знаю, что есть и функция перехода, но она, похоже, не работает. Все ли типы анимационных функций также доступны для перехода? Я использую функцию поворота в моей реальной работе.

Answer 1

Просто установите animation-iteration-count в 1. Значение infinite заставляет анимацию повторяться бесконечно. И не забудьте стилизовать объект так, как он должен быть ПОСЛЕ анимации (top: 200px;).

Я обновил скрипку: http://jsfiddle.net/nTG42/2/

Более подробную информацию предоставляет MDN: https://developer.mozilla.org/en/css/css_animations

Answer 2

Удалите бесконечность из animation:mymove infinite; и установите окончательное место как верх: 200px. Демо