CSS3 动画控制

CSS3 动画代码相对简单，在性能上会比 JavaScript 动画稍微好一些，浏览器会对 CSS3 动画做一些优化（比如专门新建一个图层用来跑动画）。但 CSS3 动画对动画控制上不够灵活的缺点也很明显。如何像控制视频播放一样控制 CSS3 动画播放、暂停、重放呢？

效果实现

下面实例是我本人的一个尝试。

html 代码：

<div class="wrapper">
  <div id="animated_div" class="demo">
    CSS3<br><span>动画</span>
  </div>
</div>
<hr>
<div align="center">
  <button id="playBtn">Play</button>
  <button id="pauseBtn">Pause</button>
  <button id="replayBtn">Replay</button>
</div>

可以看到，页面主要是有动画 div 和三个按钮组成。

css 代码：

.wrapper {
  padding-top: 80px;
  padding-right: 100px;
}
#animated_div {
  width: 76px;
  height: 47px;
  background: #92B901;
  color: #fff;
  position: relative;
  font-weight: bold;
  font-size: 20px;
  padding: 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

#animated_div span {
   font-size: 10px;
}

.demo {
  animation: demo 5s ease 1s infinite;
  -webkit-animation: demo 5s ease 1s infinite;
}

@media only screen and (max-width: 767px) {
  .demo {
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
  }
}

@media only screen and (min-width: 768px) {
  .demo {
    animation-duration: 4s;
    -webkit-animation-duration: 4s;
  }
}

@media only screen and (min-width: 992px) {
  .demo {
    animation-duration: 5s;
    -webkit-animation-duration: 5s;
  }
}

@keyframes demo {
  0% {
    transform: rotate(0deg);
    left: 0px;
  }
  25% {
    transform: rotate(20deg);
    left: 0px;
  }
  50% {
    transform: rotate(0deg);
    left: 100%;
  }
  55% {
    transform: rotate(-10deg);
    left: 100%;
  }
  70% {
    transform: rotate(-20deg);
    left: 100%;
    background: #1ec7e6;
  }
  100% {
    transform: rotate(-360deg);
    left: 0px;
  }
}

@-webkit-keyframes animated_div {
  0% {
    -webkit-transform: rotate(0deg);
    left: 0px;
  }
  25% {
    -webkit-transform: rotate(20deg);
    left: 0px;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    left: 100%;
  }
  55% {
    -webkit-transform: rotate(-20deg);
    left: 100%;
  }
  70% {
    -webkit-transform: rotate(0deg);
    left: 100%;
    background: #1ec7e6;
  }
  100% {
    -webkit-transform: rotate(-360deg);
    left: 0px;
  }
}

关于 CSS3 的动画的实现，可以参考前面的文章和分享。

JavaScript 代码：

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';
}

CSS3 的动画中，动画元素的 animation-play-state 属性规定动画是否正在运行或暂停。属性值为 paused 可指定暂停动画，属性值为 running 可指定正在运行的动画。默认是 running。因此使用 JavaScript 动态改变这两个值就可以控制 CSS3 动画播放、暂停了。

控制 CSS3 动画重放相对麻烦一点，主要的思路将动画元素的动画样式先删除再添加，要注意将动画样式独立成一个类选择器，这样方便直接利用 classList 对象的方法进行删除添加操作。另外，删除添加是两个操作之间要有时间间隔，用 setTimeout 就可以实现了。

即使借助 JavaScript，对 CSS3 动画的控制也是有限的。复杂些的效果还得使用 JavaScript 动画。