What is the best way to incorporate a button for toggling CSS animations?

Question

What is the best way to incorporate a button for toggling CSS animations?

I need help adding a button to toggle the animation on this JSFiddle. I tried adding the code below but can't seem to start and stop the animation.

body .a [class^="b"] {
      width: 200px;
      height: 142.8571428571px;
      margin: 0 auto;
      position: relative;
      left: 71.4285714286px;
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left;
      border-radius: 100% 300%;
      background: radial-gradient(bottom left, transparent 41.4285714286px, #ff0c0c 41.4285714286px, #3f0000 -15px, #ff0c0c 71.4285714286px);
      /*  -webkit-box-shadow: 71.4285714286px 71.4285714286px 142.8571428571px darkred;*/
      box-shadow: 71.4285714286px 71.4285714286px 142.8571428571px rgb(164, 69, 14);
      -webkit-animation-duration: 5s;
      animation-duration: 0.5s;
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }

javascript jquery html css

Answer 1

Answer №1

Explore the demo here: https://jsfiddle.net/xianshenglu/bjwhm3bf/3/

To begin, I extracted this code into an HTML format and altered its value to "stop":

<input type="button" id="button" value="stop"></input>

Next, I applied CSS styling to the button:

body #button {
  z-index:1;
  position:absolute;
  left:0;
  top:0;
}

Then, I introduced the following JavaScript code:

document.getElementById('button').addEventListener('click', function() {
  var animationPlayStateEle = document.querySelectorAll('.a [class^="b"]');

  if (this.value === 'start') {
      Array.from(animationPlayStateEle, function(ele) {
          ele.style.animationPlayState = 'running';
      });
      this.value = 'stop';
  } else if (this.value === 'stop') {
      Array.from(animationPlayStateEle, function(ele) {
          ele.style.animationPlayState = 'paused';
      });
      this.value = 'start';
  }

}, false);

Upon completion, the task is done; The key takeaway is that when you click the button and its value is 'stop', I modify the following:

.a [class^="b"] {
    animation-play-state: play;
}

to

.a [class^="b"] {
    animation-play-state: paused;
}

within the JavaScript code by adjusting the element's style; Similarly, when you click the button and its value is 'start', I update:

.a [class^="b"] {
    animation-play-state: paused;
}

to

.a [class^="b"] {
    animation-play-state: running;
}

Comprehend?

Answer 2

Explore the demo here: https://jsfiddle.net/xianshenglu/bjwhm3bf/3/

To begin, I extracted this code into an HTML format and altered its value to "stop":

<input type="button" id="button" value="stop"></input>

Next, I applied CSS styling to the button:

body #button {
  z-index:1;
  position:absolute;
  left:0;
  top:0;
}

Then, I introduced the following JavaScript code:

document.getElementById('button').addEventListener('click', function() {
  var animationPlayStateEle = document.querySelectorAll('.a [class^="b"]');

  if (this.value === 'start') {
      Array.from(animationPlayStateEle, function(ele) {
          ele.style.animationPlayState = 'running';
      });
      this.value = 'stop';
  } else if (this.value === 'stop') {
      Array.from(animationPlayStateEle, function(ele) {
          ele.style.animationPlayState = 'paused';
      });
      this.value = 'start';
  }

}, false);

Upon completion, the task is done; The key takeaway is that when you click the button and its value is 'stop', I modify the following:

.a [class^="b"] {
    animation-play-state: play;
}

to

.a [class^="b"] {
    animation-play-state: paused;
}

within the JavaScript code by adjusting the element's style; Similarly, when you click the button and its value is 'start', I update:

.a [class^="b"] {
    animation-play-state: paused;
}

to

.a [class^="b"] {
    animation-play-state: running;
}

Comprehend?

What is the best way to incorporate a button for toggling CSS animations?

Answer №1

Similar questions

What is the best way to extract data from a JSON object in JavaScript?

Record client's real-time decision in the database

What is the best way to pass multiple parameters along with the context to a URL in Vuex?

Creating a basic live data visualization chart

Is there a different method for looping in JSX besides .map()?

Trouble with the datepicker

When creating a FlipCard, you may encounter the error message "The object may be null" while using the document.querySelector() method

Having trouble setting the focus on a text box following a custom popup

Eliminating an element from an array based on a single criterion

Conceal the .dropdown-backdrop from bootstrap using solely CSS styling techniques

Automating Internet Explorer using VBA to click a button

Error 404 encountered while attempting to access dist/js/login in Node.JS bootstrap

What are the steps to develop a progress bar using PHP and JavaScript?

Unable to Retrieve Response from jQuery AJAX in a Function

I am facing an issue where the URL generated in the Controller in Laravel is not functioning properly when

Triggering the Bootstrap modal multiple times with each increment

Smooth transition of an arrow moving in a continuous loop using CSS animations

Utilize images inputted via an HTML DOM file uploader within p5.js

Video HTML autoplay feature malfunctioning

Update the content of a div and refresh it when a key on the keyboard is pressed