我需要一个按钮和我的动画。按下该按钮我想暂停动画，再次按下我想播放动画。我对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>
但是当我暂停动画时，背景颜色转换仍在进行，即;我猜太阳脉冲动画仍在以某种方式工作我想暂停背景颜色变化。提前谢谢。
答案 0 :(得分：1)
你快到了;你只需要暂停你的SVG动画。
注意：我已将click事件绑定到此示例的figure元素。
var figure=document.getElementById("night-day"),
sky=figure.querySelector("svg"),
sun=figure.querySelector(".sun"),
moon=figure.querySelector(".moon");
figure.addEventListener("click",function(){
sky.animationsPaused()?sky.unpauseAnimations():sky.pauseAnimations();
sun.classList.toggle("paused");
moon.classList.toggle("paused");
},0);#night-day{
background-color:#000;
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/starfield_stock_1.jpg);
background-size:cover;
font-size:0;
height:500px;
margin:0 auto;
overflow:hidden;
position:relative;
max-width:1000px;
}
.sun{
animation:suntrack 24s infinite forwards linear,sunpulse 2s alternate infinite;
background:radial-gradient(ellipse at center, #f90 0%, #fc0 60%, #ff0 100%);
border-radius:100%;
bottom:-7vw;
height:15vw;
position:absolute;
right:7vw;
transform-origin:-28vw 7vw;
width:15vw;
}
.moon{
animation:moontrack 24s infinite backwards linear;
animation-delay:12s;
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moon8.png);
background-position:center;
background-repeat:no-repeat;
background-size:90% 90%;
border-radius:100%;
bottom:-7vw;
height:15vw;
opacity:.8;
position:absolute;
right:7vw;
transform-origin:-28vw 7vw;
width:15vw;
}
.paused{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
@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);
}
}<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>