我需要在没有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;
答案 0 :(得分:5)
将动画样式移动到main:块后,然后在选中/选择播放按钮时切换暂停/运行,如下所示:
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;
答案 1 :(得分:1)
将动画设置为.progress::after
,其中包含animation-play-state: paused
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;