如何在单击按钮时使用CSS（而不是JS）中的animation-play-state属性暂停/播放阶段更改动画？ 我在互联网上找到的所有内容都是单击同一元素或该元素的父元素，而不是两个单独的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button class="button" id="start">play/pause</button>
<div id="stage"></div>
</body>
</html>
#stage {
height:300px;
border:1px solid #000;
animation:stage-change 6s 6 forwards;
overflow: hidden;
}
@keyframes stage-change {
0% {
background-color: darkorange ;
}
100% {
background-color: #1c1341;
}
}
您可以使用
~假设你想完全用CSS来做，你不能真正让按钮同时播放和暂停，你可以使用JS来实现单个按钮。
我在这里使用了 2 个按钮，一个用于播放，一个用于暂停。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button class="button" id="play">play</button>
<button class="button" id="pause">pause</button>
<div id="stage"></div>
</body>
</html>
CSS
#stage{
height:300px;
border:1px solid #000;
overflow: hidden;
animation: stage-change 6s 6 forwards;
animation-play-state: paused;
}
@keyframes stage-change {
0% {
background-color: darkorange ;
}
100% {
background-color: #1c1341;
}
}
#play:focus ~ #stage{
animation-play-state: running;
}
#pause:focus ~ #stage{
animation-play-state: paused;
}
或
如果您确实只想使用一个输入元素来控制动画，则可以使用复选框 hack。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" id="check"> play
<div id="stage"></div>
</body>
</html>
CSS
#stage{
height:300px;
border:1px solid #000;
overflow: hidden;
animation: stage-change 6s 6 forwards;
animation-play-state: paused;
}
@keyframes stage-change {
0% {
background-color: darkorange ;
}
100% {
background-color: #1c1341;
}
}
#play:checked ~ #stage{
animation-play-state: running;
}
如果您用复选框替换按钮并设置按钮的样式，那么您可以实现您的任务：
/* Styling for the button */
.button {
display: inline-block;
padding: 2px 7px;
border: 1px solid #767676;
border-radius: 3px;
box-sizing: border-box;
font: normal 13.3333px sans-serif;
background-color: #efefef;
user-select: none;
}
.button:hover { border-color: #474747; background-color: #e3e3e3; }
.button:active { border-color: #8c8c8c; background-color: #f5f5f5; }
/* Control element */
#start {
position: absolute;
height: 1px; width: 1px;
opacity: 0; pointer-events: none;
}
/* Controllable element */
#stage {
height: 300px; border: 1px solid #000;
animation: stage-change 6s 6 forwards paused;
}
#start:checked + #stage { animation-play-state: running; }
/* Animation */
@keyframes stage-change {
0% { background-color: darkorange; }
100% { background-color: #1c1341; }
}<label for="start" class="button">play/pause</label>
<input id="start" type="checkbox">
<div id="stage"></div>可以通过在标记中使用真实按钮来简化样式：
/* Button */
.button { pointer-events: none; }
/* Control element */
#start {
position: absolute;
height: 1px; width: 1px;
opacity: 0; pointer-events: none;
}
/* Controllable element */
#stage {
height: 300px; border: 1px solid #000;
animation: stage-change 6s 6 forwards paused;
}
#start:checked + #stage { animation-play-state: running; }
/* Animation */
@keyframes stage-change {
0% { background-color: darkorange; }
100% { background-color: #1c1341; }
}<label for="start"><button class="button">play/pause</button></label>
<input id="start" type="checkbox">
<div id="stage"></div>或者您可以进一步扩展功能 - 按钮上的标签将会改变：
/* Styling for the button */
.button {
display: inline-block;
padding: 2px 7px;
border: 1px solid #767676;
border-radius: 3px;
box-sizing: border-box;
font: normal 13.3333px sans-serif;
background-color: #efefef;
user-select: none;
}
.button:hover { border-color: #474747; background-color: #e3e3e3; }
.button:active { border-color: #8c8c8c; background-color: #f5f5f5; }
.button::before { content: 'play'; }
#start:checked + .button::before { content: 'pause'; }
/* Control element */
#start {
position: absolute;
height: 1px; width: 1px;
opacity: 0; pointer-events: none;
}
/* Controllable element */
#stage {
height: 300px; border: 1px solid #000;
animation: stage-change 6s 6 forwards paused;
}
#start:checked + label + #stage { animation-play-state: running; }
/* Animation */
@keyframes stage-change {
0% { background-color: darkorange; }
100% { background-color: #1c1341; }
}<input id="start" type="checkbox">
<label for="start" class="button"></label>
<div id="stage"></div>