How do I stop a keyframe animation from looping with CSS3?

Answer 1

To stop a keyframe animation in CSS, you use the forwards value in the animation-fill-mode property.

The syntax looks like this:

animation-fill-mode: forwards;

Here's how it looks in a complete animation declaration (taken from Mozilla Developer Network):

HTML

<p class="growsandstays">This grows and stays big.</p>

CSS

@keyframes grow {

0% { font-size: 0; }

100% { font-size: 40px; }

}

.growsandstays {

animation-name: grow;

animation-duration: 3s;

animation-fill-mode: forwards; /* This declaration stops the animation from looping. */

}

Here's a demo on JSFiddle: https://jsfiddle.net/7da4gqzy/

More information on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode