Is there a way to continuously switch a CSS animation class without needing a second click?

Question

Is there a way to continuously switch a CSS animation class without needing a second click?

I am seeking a solution to animate the color and size of a div box, then return it to its original state when a button is clicked. Here is an example of my code:

document.getElementById("andAction").addEventListener("click", function() {
    document.getElementById("box").classList.toggle("animi");
})

.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width:20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

@keyframes blob {
  0%  { 
         background-color: #999;
      }
  50% { 
        background-color: #F9086D;
        transform: scale(2);
        background-color: red;
        border-radius: 20px;
      }
  100% { 
        background-color: #999;          
      }
 }

.animi {
  animation-name: blob;
  animation-duration:3s;
  animation-iteration-count:1;
}

<button id="andAction" class="button">button</button>

<div id="box" class="box>1</div>

Issue

The problem I encountered was with using toggle, requiring two clicks for the desired effect. I also tried classList.add followed by remove, but this did not initiate the animation. Using timeout was one workaround.

Query

I believe there might be another approach to achieve this. Any suggestions?

javascript css animation css-animations

Answer 1

Answer №1

If you want to get rid of the class after an animation ends, you can utilize the onanimationend event instead of using complex timers:

const boxElement = document.getElementById("box")

boxElement.addEventListener('animationend', (e) => {
  // Check if the target is the box itself and the animation name is 'blob', then remove the class
  if (e.target === boxElement && e.animationName === "blob") {
    boxElement.classList.remove('animi');
  }
})

document.getElementById("andAction").addEventListener("click", function() {
    boxElement.classList.add("animi");
})

Answer 2

If you want to get rid of the class after an animation ends, you can utilize the onanimationend event instead of using complex timers:

const boxElement = document.getElementById("box")

boxElement.addEventListener('animationend', (e) => {
  // Check if the target is the box itself and the animation name is 'blob', then remove the class
  if (e.target === boxElement && e.animationName === "blob") {
    boxElement.classList.remove('animi');
  }
})

document.getElementById("andAction").addEventListener("click", function() {
    boxElement.classList.add("animi");
})

Answer 3

Answer №2

To automatically remove the class after the animation finishes and change the initial behavior to only add the class, you can use JavaScript along with the animationend event.

const box=document.getElementById("box");

document.getElementById("andAction").addEventListener("click", function() {
  box.classList.add("animi");
});

box.addEventListener('animationend', () => {
  box.classList.remove("animi");
});

.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width: 20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

@keyframes blob {
  0% {
    background-color: #999;
  }
  50% {
    background-color: #F9086D;
    transform: scale(2);
    background-color: red;
    border-radius: 20px;
  }
  100% {
    background-color: #999;
  }
}

.animi {
  animation-name: blob;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>

Answer 4

To automatically remove the class after the animation finishes and change the initial behavior to only add the class, you can use JavaScript along with the animationend event.

const box=document.getElementById("box");

document.getElementById("andAction").addEventListener("click", function() {
  box.classList.add("animi");
});

box.addEventListener('animationend', () => {
  box.classList.remove("animi");
});

.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width: 20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

@keyframes blob {
  0% {
    background-color: #999;
  }
  50% {
    background-color: #F9086D;
    transform: scale(2);
    background-color: red;
    border-radius: 20px;
  }
  100% {
    background-color: #999;
  }
}

.animi {
  animation-name: blob;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>

Is there a way to continuously switch a CSS animation class without needing a second click?

Issue

Query

Answer №1

Answer №2

Similar questions

The successful loading of tab favicons in the DOM of an angular chrome extension is a triumph, however, explicit XHR requests are unfortunately

What might prevent an onSubmit event from triggering the execution of "checkTheForm()"?

Is it possible for me to use an NPX tool to execute git clone command?

What could be causing the CSS transition to fail when the menu button is clicked?

Exploring the Magic of Class Variable Destructuring in React

Should I wait for my state to be updated with new information before triggering the render function?

The PurgeCSS CLI does not generate CSS files beyond the command line interface

xhttp.load path for server-side module

Center the R Shiny showNotification on the screen

Why Safari is Not Displaying Drop Shadows on SVG Path Elements in CSS

Capturing member function details using JSDoc

Which language is better for refreshing web pages: PHP or Javascript?

Text arranged in a vertical orientation with a group of text aligned along the baseline

In an Electron-React-Typescript-Webpack application, it is important to note that the target is not a DOM

What is the best way to keep a <div> class anchored to the bottom of an HTML page?

Show only the present y-coordinate in the ToolTip of a chart.js

What could be causing Next.js to throw an error upon completion of the MSAL OAuth process?

"Upon updating, the array within the mapped state to props in React Redux appears to be

The React component fails to inherit any props that are passed to it when it is rendered using a logical operator

Transcluding content inside a table cell with Angular