Instantly end CSS animation with JavaScript

Question

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">

Temani Afif · Accepted Answer · 2018-01-13 09:50:37Z

3

You can make the animation in a separate class, and simply remove this class to stop the animation:

let stop = function() {
  let elem = document.getElementById('search-box');
  elem.classList.remove('animate');
}

#search-box {}

.animate {
  animation: 5s fade-in;
}

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

<input id="search-box" class="animate">
<button onclick='stop()'>stop!</button>

Or simply unset the animation property:

let stop = function() {
  let elem = document.getElementById('search-box');
  elem.style.animation='unset';
}

#search-box {
  animation: 5s fade-in;
}

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

<input id="search-box" class="animate">
<button onclick='stop()'>stop!</button>

edited Jan 13, 2018 at 9:50

answered Jan 13, 2018 at 9:30

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Temani Afif Over a year ago

@Acidic i added a second method also ;)

Collectives™ on Stack Overflow

Instantly end CSS animation with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related