我需要一个按钮和我的动画。通过按下该按钮，我想暂停动画并再次按下我想播放动画。我对 css3 关键帧动画有点陌生，所以我对此感到困惑。这是我在同一个文件中的动画页面代码及其 CSS。
<!DOCTYPE html>
<head>
<title>Animation</title>
<style>
figure#night-day {
margin: 0 auto;
font-size: 0;
max-width: 1000px;
height: 500px;
background-color: #000;
overflow: hidden;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/starfield_stock_1.jpg);
background-size: cover;
position: relative;
}
@keyframes suntrack {
from {
transform: rotate(.15turn);
}
to {
transform: rotate(-.85turn);
}
}
@keyframes moontrack {
from {
transform: rotate(.15turn);
}
to {
transform: rotate(-.85turn);
}
}
@keyframes sunpulse {
from {
box-shadow: 0 0 100px rgba(255, 255, 0, .4), 0 0 100px rgba(255, 255, 0, .4);
}
to {
box-shadow: 0 0 50px rgba(255, 255, 0, .8), 0 0 75px rgba(255, 255, 0, .8);
}
}
.sun {
width: 15vw;
height: 15vw;
background: #ff0;
background: radial-gradient(ellipse at center, #f90 0%, #fc0 60%, #ff0 100%);
border-radius: 100%;
position: absolute;
bottom: -7vw;
right: 7vw;
transform-origin: -28vw 7vw;
animation: suntrack 24s infinite forwards linear, sunpulse 2s alternate infinite;
}
.moon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moon8.png);
width: 15vw;
height: 15vw;
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: 90% 90%;
border-radius: 100%;
bottom: -7vw;
right: 7vw;
transform-origin: -28vw 7vw;
animation: moontrack 24s infinite backwards linear;
animation-delay: 12s;
opacity: .8;
}
</style>
</head>
<body>
<figure id="night-day">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop stop-color="rgb(0,0,12)" offset="0%" id="zenith">
<animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)"
repeatCount="indefinite" />
<animate attributeName="offset" dur="24s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0" repeatCount="indefinite" />
</stop>
<stop stop-color="rgb(0,0,12)" offset="100%" id="horizon">
<animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)"
repeatCount="indefinite" />
</stop>
</linearGradient>
<rect id="sky" x="0" y="0" width="100%" height="100%" style="fill:url(#skyGradient)" />
</svg>
<div class="sun"></div>
<div class="moon"></div>
</figure>
</body>更新 ：
我已经成功暂停并使用以下javascript代码播放了太阳和月亮类
<script>
var sun = document.querySelectorAll('.sun');
var moon = document.querySelectorAll('.moon');
document.getElementById('PlayPause').onclick = function () {
for (var i = 0; i < sun.length; i++) {
if (sun[i].style.animationPlayState == 'paused') {
sun[i].style.animationPlayState = 'running';
}
else {
sun[i].style.animationPlayState = 'paused';
}
}
for (var i = 0; i < moon.length; i++) {
if (moon[i].style.animationPlayState == 'paused') {
moon[i].style.animationPlayState = 'running';
}
else {
moon[i].style.animationPlayState = 'paused';
}
}
}
</script>
但是当我暂停动画时，背景色过渡仍在进行，即；我猜太阳脉冲动画还在工作，我也想暂停背景颜色的变化。提前致谢。