Animation paused with transition

Question

I have an animation moving background-positionimages with keyframes, and this works great.

Although, when the user clicks the button, I would like to pause the background animation, but with the transition, slowing down and then stopping the movement background-position.

I was looking for something similar, but could not find anything, so I was wondering if any of you have any idea how I can do this?

Thanks.

Answer 1

NO. You cannot achieve this with CSS animations using only one element for several reasons, and they look like this:

• paused .

• , . , background-position JS ( ).

  W3C:

  CSS . . , .

  . animation-play-state: paused, , , background-position ( ), . JS - , , .

  var el = document.getElementsByTagName('div')[0];
  var btn = document.getElementById('stop');
  var i = 0,
    bgPosX,
    interval,
    state = 'running';
  
  btn.addEventListener('click', function() {
  /*  state = (state == 'running') ? 'paused' : 'running';
    console.log(state);
    if (state == 'paused') {
      var currPos = window.getComputedStyle(el).backgroundPositionX;
      bgPosX = parseInt(currPos.replace('px', ''), 10);
      interval = setInterval(function() {
        slowPause(bgPosX);
      }, 1);
    } else {
      el.style.backgroundPosition = null;
    } */
    el.classList.toggle('paused');
  });
  
  /*function slowPause(currPosX) {
    el.style.backgroundPosition = currPosX + (i * 0.2) + 'px 0%';
    console.log(el.style.backgroundPositionX);
    i++;
    if (i >= 1000) {
      clearInterval(interval);
      i = 0;
      console.log('cleared');
    }
  }*/

  .animated-bg-pos {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, orange 50%, orange 75%, green 75%);
    background-size: 800px 100%;
    animation-name: animate-bg-pos;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 4s;
  }
  body div.animated-bg-pos.paused {
    animation-play-state: paused;
    background-position: 200px 0% !important;
  }
  @keyframes animate-bg-pos {
    from {
      background-position: 0px 0%;
    }
    to {
      background-position: 800px 0%;
    }
  }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <div class='animated-bg-pos'></div>
  
  <button id='stop'>Stop Animation</button>

  Hide result

• . . .

• . , . .
• , - JS , "". , , , , .

, jQuery JavaScript, . background-position.

/* initial variable declarations */
var el = document.getElementsByTagName('div')[0];
var btn = document.getElementById('stop');
var i = 0,
  currPos = 0,
  pauseInterval, runningInterval,
  running = true,
  bgSize = parseInt(window.getComputedStyle(el).backgroundSize.split('px')[0], 10);

/* toggle button listener */
btn.addEventListener('click', function() {
  running = !running; // toggle state
  if (!running) {
    i = 0;
    currPos = parseInt(el.style.backgroundPositionX.replace('px', ''), 10);
    clearInterval(runningInterval); /* stop the normal animation timer */
    pauseInterval = setInterval(function() {
      slowPause(currPos); /* call the slow pause function */
    }, 10);
  } else {
    i = 0;
    currPos = parseInt(el.style.backgroundPositionX.replace('px', ''), 10);
    clearInterval(pauseInterval); /* for safer side, stop pause animation timer */
    runningInterval = setInterval(function() {
      anim(currPos); /* call the normal animation function */
    }, 10);
  }
});

/* slowly pause when toggle is clicked */
function slowPause(currPosX) { 
  el.style.backgroundPosition = (currPosX + (i * .025)) % bgSize  + 'px 0%';
  i += 10;
  if (i >= 1000) { /* end animation after sometime */
    clearInterval(pauseInterval);
    i = 0;
  }
}

/* increment bg position at every interval */
function anim(currPosX) { 
  el.style.backgroundPosition = (currPosX + (i * .25)) % bgSize + 'px 0%';
  i += 10;
}

/* start animation on load */
runningInterval = setInterval(function() { 
  anim(currPos);
}, 10);

.animated-bg-pos {
  height: 100px;
  width: 200px;
  background-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, orange 50%, orange 75%, green 75%);
  background-size: 800px 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='animated-bg-pos'></div>

<button id='stop'>Toggle Animation State</button>

Hide result

. , . JS , JS, , .

---

, , vals '.

var el = document.getElementsByTagName('div')[1];
var btn = document.getElementById('stop');

btn.addEventListener('click', function() {
  el.classList.toggle('paused');
});

.cover {
  position: relative;
  width: 200px;
  height: 100px;
  border: 1px solid;
  overflow: hidden;
}
.animated-bg-pos {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100px;
  width: 240px;
  left: -40px;
  background-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, orange 50%, orange 75%, green 75%);
  background-size: 800px 100%;
  animation: animate-bg-pos 4s linear infinite;
  transition: transform 1s ease-out;
}
.paused {
  animation-play-state: paused;
  transform: translateX(40px);
}
@keyframes animate-bg-pos {
  from {
    background-position: 0px 0%;
  }
  to {
    background-position: 800px 0%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='cover'>
  <div class='animated-bg-pos'></div>
</div>
<button id='stop'>Stop Animation</button>

Hide result

.. vals. , .

Answer 2

CSS , . , (, ...) .

Answer 3

, , , java script, .

something like that. Basically just create a new css class with a new one that sets a certain amount of time to start the animation.

For example, if the animation that you run works indefinitely, then simply create a new class with the same values, but with a specific time, for example, 2 or 4, etc. After these 4 animations you need to stop.

 $(document).click(function (e) {
  $el = $(e.target);
 if ($el.hasClass('Button_class')) {
      $(".moving_image_class").toggleClass('new_class');

  } else {
      $(".moving_image_class").removeClass('New_class');
  }

});