How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

Question

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button.

function initiateAnimation(el){  document.getElementById("animationBox").style.animationPlayState = "running";
}

#animationBox {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: spin; 
  animation-duration: 3s;  
  animation-delay: 1s;
  animation-play-state: paused;
}

@keyframes spin {
  0% {background-color: yellow;}
  50% {background: purple;}
  100%{background: red;}
}

<div id="animationBox"></div>;

<div><button onclick="initiateAnimation(this)" class="fas fa-play">&nbsp;&nbsp;Click Me!</button></div>

javascript html css animation

Answer 1

Answer №1

Within my example provided, I utilized the addEventListener function to detect the end of an animation and subsequently reset it.

const myTest = document.getElementById("myTest");
function initiateAnimation(el) {
  myTest.style.animationPlayState = "running";   
}
myTest.addEventListener("animationend", () =>{
  myTest.style.animation = 'none';
  myTest.offsetHeight;
  myTest.style.animation = null; 
}, false);

#myTest {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-play-state: paused;
}

@keyframes example {
  0% {
    background-color: yellow;
  }
  50% {
    background: purple;
  }
  100% {
    background: red;
  }
}

<div id="myTest"></div>
<div>
  <button onclick="initiateAnimation(this)" class="fas fa-play">&nbsp;&nbsp;Click here</button>
</div>

Answer 2

Within my example provided, I utilized the addEventListener function to detect the end of an animation and subsequently reset it.

const myTest = document.getElementById("myTest");
function initiateAnimation(el) {
  myTest.style.animationPlayState = "running";   
}
myTest.addEventListener("animationend", () =>{
  myTest.style.animation = 'none';
  myTest.offsetHeight;
  myTest.style.animation = null; 
}, false);

#myTest {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-play-state: paused;
}

@keyframes example {
  0% {
    background-color: yellow;
  }
  50% {
    background: purple;
  }
  100% {
    background: red;
  }
}

<div id="myTest"></div>
<div>
  <button onclick="initiateAnimation(this)" class="fas fa-play">&nbsp;&nbsp;Click here</button>
</div>

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

Answer №1

Similar questions

Tired of searching for a way to activate the Inspect function in the right-click menu on a custom dialog while debugging Google apps

Troubleshooting a Cache Issue in Your Next.js Application

Vuejs components that have checkboxes already selected out of the box

Implementing basic authentication in Socket.IO on a Node.js server

Issue with Yeoman webapp generator and Gulp, encountering error when using Gulp-jade package

Selecting options in an input field using AngularJS

Adjust the width of the graphics on both sides of the text based on the length of the text content

The table appears to be fixed in place and will not scroll, even though the data

Using window.print as a direct jQuery callback is considered an illegal invocation

Encountering difficulty accessing the router during testing in Next.js

When scrubbing through videos, Chrome consistently throws a MEDIA_ERR_DECODE error

Align two separate unordered lists together in the center

Looking for Sha1 encryption functionality in jQuery or JavaScript?

"Troubleshooting: ngForm.controls returning undefined value in Angular application

When using the `.push` method, the array becomes null

The correct assertion of types is not carried out during the initialization of generics through a constructor

Display numerous occurrences of a certain class by utilizing a different class

It is my goal to populate the array with numbers while avoiding any duplicate entries

Do I need to make any changes to the application when adding a new couchbase node to the cluster

Displaying an iframe in Internet Explorer