Question

I’m working on my first CSS keyframe animation and would like to know how it would be possible to pause an animation after it finishes its first run-through. You can check out my site here: http://www.tommaxwell.me and the grey quote at the bottom has a hover animation that you can see. However, once the animation is over it resets. How should I go about stopping it so that it stays in the end state of the animation when it’s finished?

I know the use of a keyframe animation in this case is kind of lame and unnecessary, but I’m really just testing out keyframes, and will use it better later. 🙂

Answer 1

I know what you are doing here, use CSS transition instead

Demo

.class {
   color: #ff0000;
   transition: color 2s;
   -moz-transition: color 2s; /* Firefox 4 */
   -webkit-transition: color 2s; /* Safari and Chrome */
   -o-transition: color 2s; /* Opera */
}

.class:hover {
   color: #00ff00;
}

You wont be able to preserve the hovered state of your text, for that you need to use JavaScript