animation-play-state

animation-play-state规定动画是否正在运行或暂停。默认是 “running”。

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;

默认设定值paused，鼠标移动到例子上，状态值修改为running。

HTML

<div class="box">
  <div class="container-box">
    <div class="el top"></div>
    <div class="el right"></div>
    <div class="el left"></div>
    <div class="el bottom"></div>
  </div>
</div>      

CSS

@keyframes top {
  15% {transform: translate(0, 0) rotate(0);}
  60% {transform: translate(-30px, -30px) rotate(20deg);}
  100% {transform: translate(0, 0) rotate(90deg); }
}
@keyframes right {
  15% { transform: translate(0, 0) rotate(0);}
  60% {transform: translate(30px, -30px) rotate(-20deg); }
  100% { transform: translate(0, 0) rotate(-90deg);}
}
@keyframes left {
  15% {transform: translate(0, 0) rotate(0);}
  60% {transform: translate(-30px, 30px) rotate(-20deg);}
  100% {transform: translate(0, 0) rotate(-90deg);}
}
@keyframes bottom {
  15% {transform: translate(0, 0) rotate(0);}
  60% { transform: translate(30px, 30px) rotate(20deg);}
  100% {transform: translate(0, 0) rotate(90deg);}
}
.box {
  position: relative;
  width:200px;
  height:100px;
}
.box .container-box {
  position: absolute;
  background: #b2dbfb;
  width: 60px;
  height: 60px;
  left: 50%;
  margin-left: -30px;
  top: 50%;
  margin-top: -30px;
  transform: rotate(45deg);
  cursor: pointer;
}
.box .container-box:hover .el {
  animation-play-state: running;
}
.box .container-box .el {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #2196F3;
  margin: -3px;
  border: 2px solid #2196F3;
  border-radius: 2px;
}
.box .container-box .top {
  animation: top 1s linear infinite;
  animation-play-state: paused;
}
.box .container-box .right {
  animation: right 1s linear infinite;
  animation-play-state: paused;
}
.box .container-box .left {
  animation: left 1s linear infinite;
  animation-play-state: paused;
}
.box .container-box .bottom {
  animation: bottom 1s linear infinite;
  animation-play-state: paused;
}

执行结果

相关页面

• animation
• transform