主页 / 问题 / 768322
Accepted
soledar10
Asked:2020-01-09 18:43:25 +0000 UTC2020-01-09 18:43:25 +0000 UTC

停止css动画的能力

  • 772

你好！

是否可以从按下暂停按钮时的位置停止css动画并从停止的位置重新开始

checked Pause动画被重置的那一刻

有一个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>

css

2 个回答

  1. Best Answer

    抓住。

    #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 1;
  animation-fill-mode: forwards;
}

#play ~ .progress:after {
  animation-play-state: paused;
}

#play:checked ~ .progress:after {
  animation: animProgress 7s linear 1;
  animation-fill-mode: forwards;
}

@keyframes animProgress {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
    <input type="checkbox" name="play" id="play">
<label for="play">
  <span>Play</span>
  <span>Pause</span>
</label>

<div class="progress"></div>

    ps 在示例中，我设置了一个周期。

    • 6

  2. 稍微改变了 Kniha m 的答案。在动画中添加了循环。就像作者一样。

    #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%;
  }
}
    <input type="checkbox" name="play" id="play">
<label for="play">
  <span>Play</span>
  <span>Pause</span>
</label>

<div class="progress"></div>

    • 3

相关问题