I am using CSS animation to make a progress bar.

* When a user clicks a button, a `searching` class is added
* The `searching` class is styled with a CSS animation that takes 100 seconds

[Here's a working JSfiddle](https://jsfiddle.net/kmer8s5c/1/)

Since this is a progress bar for searching, sometimes the search will take less than the animation time - at which point I want the animation to end. I've added a timeout to the [JSFiddle](https://jsfiddle.net/kmer8s5c/1/).

However **a timeout to add a class to make the progress-bar 100% width (the final state of the animation) doesn't work**. The browser still displays the progress bar as whatever width the animation uses until the animation is complete.

**How can I end a CSS animation early, using JavaScript?**