Home Instantly end CSS animation with JavaScript
Reply: 0

Instantly end CSS animation with JavaScript

user966
1#
user966 Published in April 24, 2018, 8:32 am

I have an input box with a CSS animation assigned to it, so when the page loads, it has a nice fade-in animation.

The CSS:

#search-box {
    /* ... */
    animation: 2s fade-in
}

@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}

In some cases when the page is loaded (when a URL param exists), I'd like the input box's CSS animation to stop and instantly put the opacity to 1.

I've tried messing around with animation-play-state and attempting to override the opacity with !important but have had no luck.

Javascript:

let endAnimation = // ... boolean
if (endAnimation) {
    let elem = document.getElementById('search-box');
    // End the animation and set opacity to 1 somehow...
}

HTML:

<input id="search-box">
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.342812 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO