JavaScript allows for the immediate termination of CSS animations

Question

JavaScript allows for the immediate termination of CSS animations

I am currently working on an input box that has a CSS animation applied to it. This animation creates a smooth fade-in effect when the page is loaded.

Here is the CSS code:

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

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

However, there are times when I want the animation to stop and immediately set the opacity to 1 when a specific URL parameter is present during page load.

I have attempted to use animation-play-state and tried using !important to override the opacity property, but so far, I have not been successful.

My Javascript approach:

let endAnimation = // ... boolean
if (endAnimation) {
    let elem = document.getElementById('search-box');
    // Need to figure out how to end the animation and set opacity to 1.
}

In the HTML section:

<input id="search-box">

javascript html css css-animations

Answer 1

Answer №1

To create a smoother animation effect, you can organize the animation code in a separate class and eliminate this class to halt the animation process:

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>

Alternatively, you can reset the animation property by directly unsetting it:

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>

Answer 2

To create a smoother animation effect, you can organize the animation code in a separate class and eliminate this class to halt the animation process:

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>

Alternatively, you can reset the animation property by directly unsetting it:

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>

JavaScript allows for the immediate termination of CSS animations

Answer №1

Similar questions

What is the best method for style.scss to communicate with style.css - should it be through @import, --watch,

Utilizing R to Extract Data from HTML Webpages

Node.js and Express facing challenge with Stripe checkout functionality

Concealing the flexslider in Angular when accessing the main URL

Extract the JSON file data by eliminating the indexes (1,2,3..) and transforming it into an array format

Avoiding default action on keyboard tab event resets cursor position while typing consecutively

Using Angular Directive to create a customized TreeView

The graph visualization fails to update properly even after attempting to redraw it

The vertical dimension of an element does not increase

Looking to validate each input field individually using jQuery?

Navigating additional information in D3 Node Link Force diagram

Mastering callback functions within AngularJS animations

The difference between importing CSS in JavaScript and importing it directly in CSS lies in the way

When using jQuery AJAX, the script is returning blank values

Verifying the format of an object received from an HTTP service using a TypeScript interface

Reorganize the layout of elements based on the array of element IDs

A method to efficiently send multiple axios GET requests by incrementing the URL parameters

Angular factory transforming service

What is the best method for sending variables to the `script.` block in Pug?

How can the Flickr API be utilized with JavaScript functions?