Pause CSS Animation of Content With Javascript

Question

I have created an animation similar to described here: https://css-tricks.com/animating-the-content-property/

I can pause animation of movement but for some reason i cannot pause the animation of "content" with javascript (jQuery). I can set it default as paused but I cannot pause it after it starts running.

@-webkit-keyframes changeLetter {
  0% {
    content: "A";
  }
  50% {
    color: white;
  }
  100% {
    content: "B";
  }
}

@keyframes changeLetter {
  0% {
    content: "A";
  }
  50% {
    color: white;
  }
  100% {
    content: "B";
  }
}

@-webkit-keyframes move {
  0% {
    left: 50px;
  }
  100% {
    left: 100px;
  }
}

@keyframes move {
  0% {
    left: 50px;
  }
  100% {
    left: 100px;
  }
}

.element:after {
  -webkit-animation: changeLetter 3s linear infinite alternate;
  animation: changeLetter 3s linear infinite alternate;
  content: "A";
}

.test{
  position: relative;
  left: 0px;
  top: 0px;
  width: 50px;
  height: 50px;
  background-color: red;
}

.test {
  -webkit-animation: move 1s linear infinite alternate;
  animation: move 1s linear infinite alternate;
}

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

$("#play").click(function() {
    $('.animation').toggleClass('paused');
});

<div class="animation element"></div>
<div class="animation test"></div>
<button id="play" type="button">Pause/Play</button>

See the fiddle here: https://jsfiddle.net/eLt8zd33/1/

This is a very small code sample of my project.

Asons · Accepted Answer · 2017-02-16 17:42:45Z

3

Add the pseudo to your style for .paused

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

Since your animation is in the pseudo, adding .paused to the main without this extension won't have any effect

edited Feb 16, 2017 at 17:42

Asons

87.7k12 gold badges119 silver badges175 bronze badges

answered Feb 16, 2017 at 16:52

vals

64k11 gold badges96 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asons Over a year ago

One should always put prefixed properties first ;) ... upvoted

Collectives™ on Stack Overflow

Pause CSS Animation of Content With Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related