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 display values from a Localstorage array in a tabular format using a looping structure

Validation is not being applied to the radio button

What is the best way to retrieve and save the titles of checked boxes in the Autocomplete using state with hooks?

Customize the delete icon margin styles in Material-UI Chip component

Utilizing jQuery to make AJAX requests to multiple URLs

Using ngFor results in duplicate instances of ng-template

Do you know where I can locate the HTML and CSS pertaining to the search results page

How can you implement automatic suggestion based on the selected country by utilizing the Google API?

Can someone suggest a method for deciphering hexadecimal code used in JavaScript?

Acquiring the specific checkbox value using JQuery

Sliding off the canvas - concealed navigation

What is the reason for Jquery AJAX appending additional path to the relative path?

What adjustments need to be made on either the client-side or server-side in order to enable the functionality of getJSON()?

Example of expanding comment fields in MySql by querying JSON data

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

What is the method for embedding a concealed form within a table?

Struggling with configuring a 'post' endpoint in an express server problem

AngularJS Expression Manipulation

The linking process in AngularJS is encountering difficulties when trying to interact with

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script