css控制动画播放暂停

animation-play-state

不需要用js，用css也能实现的效果

---

关于

animation-play-state
-webkit-animation-play-state
属性指定动画是正在运行还是暂停

paused / running

兼容ie10,但是不建议简写进animation属性中

栗子

实现鼠标hover时的元素播放动画，取消hover后暂停

codepen

关于.active & 命名规范

分离、无侵入、控制关系明确

• 无侵入定位
  • 不使用keyframes决定初始位置
  • 不使用keyframes中出现的属性定位
• 居中定位准则
  • 元素定位在容器中间
  • 定位方式为居中定位

---

<div></div>

<style>
    body:hover div {
        background: #aabbcc;
        animation-play-state: running;
    }
    div {
        margin: 50px auto;
        width: 100px;
        height: 100px;
        background: #000;
        animation: move 1s linear, rotate 2s linear infinite;
        animation-fill-mode: forwards;
        animation-play-state: paused;
    }
    div:active {
        background: #eee;
        animation-play-state: running;
    }
    @keyframes move {
        100% {
            transform: translate(200px, 0) rotate(180deg);
        }
    }
    @keyframes rotate {
        100% {
            transform: translate(200px, 0) rotate(360deg);
        }
    }
</style>