Can't stop animation at end of one cycle

2018-07-01 11:58:27

This question already has an answer here:

Stopping a CSS3 Animation on last frame 8 answers

The following comment worked for me. Thanks michael

"You need to add the fill-mode to freeze the animation state at the end of the animation.

-webkit-animation-fill-mode: forwards;

forwards leaves the animation in the state of the last frame

backwards leaves the animation at the start

Just in case your animation still resets to the first frame, be careful with the order in which you declare the css:

This is working fine:

    animation: yourAnimationName 1s;
    animation-fill-mode: forwards;

This won't (reset to first frame):

    animation-fill-mode: forwards;
    animation: yourAnimationName 1s;

Tricky!

如果我正确理解了这个问题，听起来好像你需要将迭代设置为'1'。

-webkit-animation-iteration-count: 1;

链接地址: http://www.djcxy.com/p/87834.html