如何在不返回初始状态的情况下停止css动画?

时间:2018-01-09 12:19:19

标签: css css3 animation

我需要在没有js的动画中进行播放暂停。

现在,当我按下暂停时。动画进入初始状态。

如何重置动画然后从当前状态重启?

javascript的解决方案存在。我想在css上找到解决方案。



#play {
  display: none;
}

#play+label[for=play] {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  z-index: 99;
  padding: 5px;
  background: #37A000;
  margin-bottom: 15px;
}

#play+label[for=play]>span:nth-of-type(2),
#play:checked+label[for=play]>span:nth-of-type(1) {
  display: none;
}

#play:checked+label[for=play] {
  background: tomato;
}

#play:checked+label[for=play]>span:nth-of-type(2) {
  display: block;
}

.progress {
  height: 15px;
  background: #555;
  position: relative;
}

.progress:after {
  width: 0;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #37A000;
  animation-play-state: paused;
}

#play:checked+label[for=play]~.progress:after {
  animation: animProgress 7s linear infinite;
}

@keyframes animProgress {
  100% {
    width: 100%;
  }
}

<input type="checkbox" name="play" id="play">
<label for="play">
  <span>Play</span>
  <span>Pause</span>
</label>

<div class="progress"></div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:5)

将动画样式移动到main:块后,然后在选中/选择播放按钮时切换暂停/运行,如下所示:

&#13;
&#13;
Cache-Control
&#13;
#play {
  display: none;
}

#play+label[for=play] {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  z-index: 99;
  padding: 5px;
  background: #37A000;
  margin-bottom: 15px;
}

#play+label[for=play]>span:nth-of-type(2),
#play:checked+label[for=play]>span:nth-of-type(1) {
  display: none;
}

#play:checked+label[for=play] {
  background: tomato;
}

#play:checked+label[for=play]>span:nth-of-type(2) {
  display: block;
}

.progress {
  height: 15px;
  background: #555;
  position: relative;
}

.progress:after {
  width: 0;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #37A000;
  animation: animProgress 7s linear infinite;
  animation-play-state: paused;  
}

#play:checked+label[for=play]~.progress:after {
  animation-play-state: running;
}

@keyframes animProgress {
  100% {
    width: 100%;
  }
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

将动画设置为.progress::after,其中包含animation-play-state: paused

&#13;
&#13;
animation-play-state: running
&#13;
#play {
  display: none;
}

#play+label[for=play] {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  z-index: 99;
  padding: 5px;
  background: #37A000;
  margin-bottom: 15px;
}

#play+label[for=play]>span:nth-of-type(2),
#play:checked+label[for=play]>span:nth-of-type(1) {
  display: none;
}

#play:checked+label[for=play] {
  background: tomato;
}

#play:checked+label[for=play]>span:nth-of-type(2) {
  display: block;
}

.progress {
  height: 15px;
  background: #555;
  position: relative;
}

.progress:after {
  width: 0;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #37A000;
  animation: animProgress 7s linear infinite;
  animation-play-state: paused;

}

#play:checked+label[for=play]~.progress:after {
    animation-play-state: running;
}

@keyframes animProgress {
  100% {
    width: 100%;
  }
}
&#13;
&#13;
&#13;