CODEWITHSUNDEEP
htmlcsscss-animations
quadworkablepump
quadworkablepump

Reputation: 47

Trying to pause a css animation by adding a paused class

So I've seen people recomending this method as the best way to pause a css animation. Simply by adding or removing a class where the animation play state is set to paused to or from an element. Here are my attempts:

@keyframes run {
  from {
    background-position: 0px;
  }
  to {
    background-position: -1536px;
  }
}

#animation {
  width: 256px;
  height: 256px;
  position: absolute;
  background-image: url('https://i.sstatic.net/aH5zB.jpg');
  animation: run .5s steps(6) infinite;
}

.paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
}
<!DOCTYPE html>

<html lang='en'>

<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='style.css'>
</head>

<body>
  <div id='animation' class='paused'></div>
</body>

</html>

From my understanding, the animation should appear paused in the browser but instead it is running. I've tried adding !important after paused and I've tried making the class more specific i.e #animation.paused. What am I doing wrong?

Upvotes: 1

Views: 692

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

You can do this via CSS with something like :hover or with script. Here I demonstrate both.

function modifyclass() {
  if (document.getElementById("animation").classList.contains('running')) {
    document.getElementById("animation").classList.remove('running');
  } else {
    document.getElementById("animation").classList.add('running');
  }
  //  document.getElementById("animation").classList.toggle('running');
}
var el = document.getElementById("animate");
el.addEventListener("click", modifyclass, false);
@keyframes run {
  from {
    background-position: 0px;
  }
  to {
    background-position: -1536px;
  }
}

#animation {
  width: 256px;
  height: 256px;
  background-image: url('https://i.sstatic.net/aH5zB.jpg');
  animation: run .5s steps(6) infinite;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#animation.paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
}

#animation.paused:hover,
#animation.running {
  animation-play-state: running;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
}

.container {
  margin-top: 1em;
}
<body>
  <div id='animation' class='paused'></div>
  <div class="container">
    <button id="animate" type="button">Do it</button>
  </div>
</body>

Upvotes: 0

tao
tao

Reputation: 90013

That's because #animation is an id selector and it is more specific than a class selector (.paused), hence the latter won't override the first.

Replace .paused with #animation.paused and it will work.

function toggleAnimationPlayState() {
  document.querySelector('#animation').classList.toggle('paused')
}
@keyframes run {
 from {
    background-position: 0px;
  }
  to {
    background-position: -1536px;
  }
}

#animation {
  width: 256px;
  height: 256px;
  position: absolute;
  background-image: url('https://i.sstatic.net/aH5zB.jpg');
  animation: run .5s steps(6) infinite;
}

#animation.paused {
  animation-play-state: paused;
}
<button onclick="toggleAnimationPlayState()">Toggle paused class</button>
<div id='animation' class="paused"></div>

Upvotes: 4

Peter
Peter

Reputation: 624

You can achieve this desired effect without needing JS. I would try the following:

HTML

<div id="animation"></div>

CSS

#animation {
   width: 256px;
   height: 256px;
   position: absolute;
   background-image: url('spritesheet.png');
   animation: run .5s steps(6) infinite;
};

#animation:hover {
   animation-play-state: paused;
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
   -o-animation-play-state: paused;
}

@keyframes run {
   from {background-position: 0px;}
   to {background-position: -1536px;}
}

Upvotes: 0

Related Questions