how to stop CSS animation without javascript

Question

This is the jsFiddle. What I would like is stop the box when it reaches its end position. I know there is a transition function available also but that does not seem to work. Are all animation functions type also available for transition? I am using rotate function in my actual work.

Answer 1

Just set animation-iteration-count to 1. A value of infinite causes the animation to be repeated infinitely. And remember to style the object the way it should be AFTER the animation (top: 200px;).

I've updated the fiddle: http://jsfiddle.net/nTG42/2/

More information is provide by the MDN: https://developer.mozilla.org/en/css/css_animations

Answer 2

Remove the infinite from animation:mymove infinite; and set the final place as top:200px. Demo