Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>控制CSS3 动画播放、暂停、重放</title>
</head>
<body>
  <ul>
    <li>播放：element.style.animationPlayState = 'running'</li>
    <li>暂停：element.style.animationPlayState = 'paused'</li>
    <li>重放：element.classList删除添加动画样式</li>
  </ul>
  <hr>
  <div style="padding-right: 100px">
    <div id="animated_div" class="demo">
      CSS3<br><span style="font-size:10px">动画</span>
    </div>
  </div>
  <hr>
  <div align="center">
    <button id="playBtn">播放</button>
    <button id="pauseBtn">暂停</button>
    <button id="replayBtn">重放</button>
  </div>
</body>
</html>
 
var animated = document.getElementById('animated_div');
if (animated.style.animation === undefined) {
  animated.parentNode.innerText = '您的浏览器不支持CSS3 动画';
} else {
  //播放
  document.querySelector('#playBtn').addEventListener('click', run);
  //暂停
  document.querySelector('#pauseBtn').addEventListener('click', function() {
    animated.style.animationPlayState = 'paused';
  });
  //重放
  document.querySelector('#replayBtn').addEventListener('click', function() {
    animated.classList.remove('demo');
    setTimeout(function() {
      animated.classList.add('demo');
      run();
    }, 10);
  });
}
function run() {
  animated.style.animationPlayState = 'running';
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
szriafanpro
0viewers