how can I pause a css animation

Question

I am trying to pause an animation made with css using the following code but it does not work. What mistakes are I making? How can I solve it?

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

    -webkit-animation: slide 5s forwards 0s 3;
    animation: mcube1 1s forwards 0s 1;
    
}


@-webkit-keyframes mcube1{

    
    to{
        -webkit-transform: translate(130.5px, -77px);
        -ms-transform: translate(130.5px, -77px);
        transform: translate(130.5px, -77px);
    }
}
@keyframes mcube1{


    to{
        -webkit-transform: translate(130.5px, -77px);
        -ms-transform: translate(130.5px, -77px);
        transform: translate(130.5px, -77px);
    }
}

<img  id="cube1" class="position-absolute paused" src="images/intro/1.png">

score 2 · Accepted Answer · answered Oct 08 '18 at 20:58

#cube1 is a more specific selector than .paused. Therefore you are overing the animation-play-state with your shorthand animation declaration.

You could either add !important:

.paused {
    animation-play-state: paused !important;
}

or make your selector more specific:

#cube1.paused {
    animation-play-state: paused;
}

Example:

document.querySelector('button').addEventListener('click', function() {
  document.getElementById('cube1').classList.toggle('paused')
});

body {
  margin-top: 80px;
}

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

#cube1 {
  -webkit-animation: slide 5s forwards 0s 3;
  animation: mcube1 1s forwards 0s 1;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@-webkit-keyframes mcube1 {
  to {
    -webkit-transform: translate(130.5px, -77px);
    -ms-transform: translate(130.5px, -77px);
    transform: translate(130.5px, -77px);
  }
}

@keyframes mcube1 {
  to {
    -webkit-transform: translate(130.5px, -77px);
    -ms-transform: translate(130.5px, -77px);
    transform: translate(130.5px, -77px);
  }
}

<img id="cube1" class="position-absolute paused" src="https://www.fillmurray.com/100/100">

<button type="button">Toggle paused</button>

how can I pause a css animation

1 Answers1