[分享]css3怎么让动画停在最后

CSS3是现在很多网站页面设计必不可少的一部分，它可以让我们设计出很多令人惊叹的动画效果。但是，有时候我们希望动画效果结束后停留在结束状态，而不是回到起始状态，这该怎么做呢？animationfill...

CSS3是现在很多网站页面设计必不可少的一部分，它可以让我们设计出很多令人惊叹的动画效果。但是，有时候我们希望动画效果结束后停留在结束状态，而不是回到起始状态，这该怎么做呢？

animation-fill-mode: forwards; 

使用上述代码可以达到我们想要的效果，它的作用是在动画执行结束后，让元素保持在动画的最后一帧的状态，而不是回到动画开始前的状态。

同时，我们还可以使用另一个属性来控制动画执行完后是否立刻回到起始状态，该属性为animation-iteration-count，设置为1时表示动画执行完后不重复执行，此时，动画执行完成后就会停留在结束状态。

animation: example 2s forwards;
animation-iteration-count: 1; 

综上，掌握了animation-fill-mode和animation-iteration-count这两个属性，我们就能够轻松实现让动画停留在最后的效果，提高网页设计的视觉效果，吸引访问者的眼球。