How to start and stop a CSS animation?

Question

I'm having a really hard time figuring out how to start and stop an animation and reverse it.

I've assigned an animation to the element.style.animation property and from what I've read, I decided to use:

element.style.animationPlayState = "running";

to start it and:

element.style.animationPlayState = "paused";

to stop it.

But it reports "running" all the time.

Has anyone figured out how to start and stop an animation?

I have a related question here. The related part is this block of code that I use to make animations start and stop:

var style = element.style;
var animation = null;
style.animationPlayState = "paused";

if (style.animation) {
    animation = style.animation;
    style.animation = null;
    style.animationPlayState = "paused";
    element.addEventListener("animationend", function(event) {
        log("animation ended");
        element.removeEventListener("animationend", arguments.callee);
    });

    setTimeout(function() {
        style.animation = animation;
        style.animationPlayState = "paused";
        style.animationDirection = "reverse";
        style.animationPlayState = "running";
    }, 30);
}

The goal is simple:

• Display a div when user presses button
• div display is none, so set it to display: block
• Fade in div
• LATER - user presses a close button on div
• Fade out div
• After fade out set display: none

A method to do something like this:

fadeInElement(element)
fadeOutElement(element) 

Answer 1

You can toggle classes with setTimeout, something like this maybe?

var theDiv = document.querySelectorAll('div')[0];
function showDiv() {
  theDiv.setAttribute('class', 'fadeIn');
  setTimeout(function(){ theDiv.style.opacity = '1'; }, 2000);
}
function hideDiv() {
  theDiv.removeAttribute('class');  
  theDiv.setAttribute('class', 'fadeOut');
  setTimeout(function(){ theDiv.style.opacity = '0' }, 2000);
}

div {height: 100px; height: 100px; background: black; opacity: 0;}
.fadeIn {animation: 2s fadein}
.fadeOut {animation: 2s fadeout}
@keyframes fadein {  to {opacity: 1;} }
@keyframes fadeout {  to {opacity: 0;} }

<div></div>
<button onclick="showDiv()">Show DIV</button>
<button onclick="hideDiv()">Hide DIV</button>

EDIT

I changed the above code to something like this, though i guess you are looking for more modern solution:

var theDiv = document.querySelectorAll('div')[0];
var anBtn = document.querySelector('#animateBtn');
var clicks = 1;
anBtn.addEventListener('click', function() {
  anBtn.disabled = true;
  if ((clicks/2) != (clicks/2).toFixed()) {
    showDiv();
  }
  else {
    hideDiv();
  }
  clicks += 1;
});
function showDiv() {
  theDiv.setAttribute('class', 'fadeIn');
  setTimeout(function(){ theDiv.style.opacity = '1'; anBtn.disabled = false; anBtn.textContent = 'Hide Div'; }, 2000);
}
function hideDiv() {
  theDiv.removeAttribute('class');
  theDiv.setAttribute('class', 'fadeOut');
  setTimeout(function(){ theDiv.style.opacity = '0'; anBtn.disabled = false; anBtn.textContent = 'Show Div'; }, 2000);
}

div {height: 100px; height: 100px; background: black; opacity: 0;}
.fadeIn {animation: 2s fadein}
.fadeOut {animation: 2s fadeout}
@keyframes fadein {  to {opacity: 1;} }
@keyframes fadeout {  to {opacity: 0;} }

<div></div>
<button id="animateBtn">Show DIV</button>

Answer 2

With the Javascript Web Animations API you are able to use things like:

variable.play();
variable.pause();

it is a very powerful tool, here is the documentation

Also able to set the playback speed, including negative numbers which would play the animation in reverse. seems to address all of the issues that you brought up here.

Here is the polyfill which has proven to be very powerful, even works in IE

<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>

Answer 3

Attempting to solve my own question with help provided. This sort of seems to work. But seems to break the edit window console.log. Also seems to break after a few runs. Maybe unrelated.

var fadeInAnimation = "2s fadein";
var fadeOutAnimation = "2s fadein reverse";

function fadeIn() {
  var element = document.getElementById('box');
  //console.log("element", element);
  element.style.animation = fadeInAnimation;
  element.style.display = "block";
  //element.style.animationPlayState = "running";
}
function fadeOut() {
  var element = document.getElementById('box');
  element.style.display = "block";
  element.style.animationPlayState = "paused";
  element.style.animation = fadeOutAnimation;
  element.style.animationPlayState = "running";
  element.addEventListener("animationend", function(event) {
    element.style.display = "none";
console.log("animation ended");
    element.removeEventListener("animationend", arguments.callee);
  });
}

#box {
  width: 100px; 
  height: 100px; 
  background: red; 
  opacity: 1;
  display: none;
}

@keyframes fadein {  from {opacity: 0 } to {opacity: 1;} }
@keyframes fadeout {  from {opacity: 1 } to {opacity: 0;} }

<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>

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