Geek Answers Handbook

CSS Animation: Pause and Position Change

I animate the left / top div property to move it around the screen. (Prefixes removed for brevity)

animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate;

@keyframes moveX {
  from { left: 0; } to { left: 100%; }
}

@keyframes moveY {
  from { top: 0; } to { top: 100%; }
}

When I click on the div, I add a CSS class that pauses the CSS animation and should center the div on the screen. CSS:

  /* Pause Animation */
  -webkit-animation-play-state: paused; 
  -moz-animation-play-state: paused; 
  -o-animation-play-state: paused; 
  animation-play-state: paused; 

  /* Position Center */
  top:50%;
  left:50%;
  margin: -50px 0 0 -50px;

The left / top value is not applicable.

How to pause and save the current state of the animation, change the position of the div and return to the animation.

Reduced test case: http://test.addedlovely.com/pmr/

+4
source share
2 answers

This is due to the fact that you still have

-webkit-animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate;
-moz-animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate;
-o-animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate;
animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate;
}

set attribute: this should do the trick

-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
0
source

, top/left margin-top/margin-left , -. , . div, , .

, absolute fixed flex justify-content align-items. divs, , . animation-fill-mode forwards, .

DEMO: http://jsbin.com/secag/1/

HTML:

<div id="container">
  <div id="parent">
    <div id="div" class="animated running"</div>
  </div>
</div>

CSS:

#container {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
}

#parent {
  height: 100%;
  display: -webkit-flex;
  display: flex;
}

.center-children {
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

#div {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.animated {
  -webkit-animation: moveX 10s linear 0s infinite alternate both, moveY 7s linear 0s infinite alternate;
  -webkit-animation-fill-mode: forwards
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 100%; }
}

@-webkit-keyframes moveY {
  from { top: 0; } to { top: 100%; }
}  

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

.running {
  -webkit-animation-play-state: running;
  position: absolute;
}

JS:

document.addEventListener('DOMContentLoaded', function(){

  var div = document.getElementById('div');

  div.addEventListener('click', function(){
    if(this.classList.contains('paused')) {
      this.parentElement.classList.remove('center-children');
      this.classList.remove('paused');
      this.classList.add('running');
    } else {
      this.classList.remove('running');
      this.classList.add('paused');
      this.parentElement.classList.add('center-children');
    }
  });

});

DOCS:

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

0

More articles:


All Articles