Pause animation in interaction for a particular time in css

I want to pause animation for a particular time between repeating animation

I will fetch data from json file, e.g. 1s pause, 2s pause, 3s pause, 4s pause.

I can only use javascript/css hacks to pause animation.

Animation is purely made in CSS. 

https://codepen.io/prax/pen/WORMEJ

Thanks in advance

1 answer

  • answered 2017-06-17 19:21 Michael Coker

    In whatever your "fetch data" function is, apply animation-play-state: paused; to the elements you want to pause, then remove that when you're ready to un-pause.

    Here's a demo.

    document.getElementById('button').addEventListener('click',function() {
      // fetch data & pause & setTimeout to un-pause
      document.getElementById('div').classList.add('pause');
      var seconds = 1; // use a different value to pause for different times
      var timeout = setTimeout(function() {
        document.getElementById('div').classList.remove('pause');
      },seconds * 1000)
    })
    div {
      animation: foo 3s infinite;
    }
    @keyframes foo {
      50% {
        color: red;
      }
    }
    .pause {
      animation-play-state: paused;
      background: #eee;
    }
    <div id="div">asdf</div>
    <button id="button">button</button>