如何使用复选框来更改动画播放状态

如何使用复选框更改/切换动画播放状态从播放到暂停（是否必须使用js），我知道它需要更多的工作但我有点卡住在这一点上，因为我知道很少或没有JavaScript。（任何帮助，将不胜感激:)）这是我到目前为止有：如何使用复选框来更改动画播放状态

<body id="body" onLoad="reset(); return true;"> 
<div id="wrapper"> 
    <div id="cloud"> 
     <div id="cloud1"> 
      <header id="topheader"> 

       <input type="checkbox" id="toggle" name="toggle"/> 
       <label for="toggle"></label> 
      </header> 
     </div> 
    </div> 
</div> 
</body> 
#cloud{ 
background-image: url("../image/clouds.png"); 
background-size: 200% 200%; 
background-position: -50% -50%; 
-webkit-animation: cloud 120s ease-in-out infinite alternate; 
-moz-animation: cloud 120s ease-in-out infinite alternate; 
-o-animation: cloud 120s ease-in-out infinite alternate; 
animation: cloud 120s ease-in-out infinite alternate; 
-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0); 
-o-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
} 

@-webkit-keyframes cloud { 
0%{ 
    background-size: 200% 200%; 
background-position: -50% -50%; 
} 
50%{ 
background-size: 150% 150%; 
background-position: 0% 0%; 
} 
100%{ 
background-size: 100% 100%; 
background-position: 50% 50%; 
} 
} 

@-moz-keyframes cloud { 
0%{ 
    background-size: 200% 200%; 
background-position: -50% -50%; 
} 
50%{ 
background-size: 150% 150%; 
background-position: 0% 0%; 
} 
100%{ 
background-size: 100% 100%; 
background-position: 50% 50%; 
} 
} 

@keyframes cloud { 
0%{ 
    background-size: 200% 200%; 
background-position: -50% -50%; 
} 
50%{ 
background-size: 150% 150%; 
background-position: 0% 0%; 
} 
100%{ 
background-size: 100% 100%; 
background-position: 50% 50%; 
} 
} 
@-o-keyframes cloud { 
0%{ 
    background-size: 200% 200%; 
background-position: -50% -50%; 
} 
50%{ 
background-size: 150% 150%; 
background-position: 0% 0%; 
} 
100%{ 
background-size: 100% 100%; 
background-position: 50% 50%; 
} 
} 

#cloud1{ 
background-image: url("../image/clouds1.png"); 
background-size: 200% 200%; 
background-position: 150% 150%; 
-webkit-animation: cloud1 150s ease-in-out infinite alternate; 
-moz-animation: cloud1 150s ease-in-out infinite alternate; 
-o-animation: cloud1 150s ease-in-out infinite alternate; 
animation: cloud1 150s ease-in-out infinite alternate; 
-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0); 
-o-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
} 

@-webkit-keyframes cloud1 { 
0%{ 
    background-size: 200% 200%; 
background-position: 150% 150%; 
opacity: .8; 
} 
50%{ 
background-size: 150% 150%; 
background-position: 0% 0%; 
opacity: .5; 
} 
100%{ 
background-size: 100% 100%; 
background-position: -50% -50%; 
opacity: .3; 
} 
} 

@-moz-keyframes cloud1 { 
0%{ 
    background-size: 200% 200%; 
background-position: 150% 150%; 
opacity: .8; 
} 
50%{ 
background-size: 150% 150%; 
background-position: 0% 0%; 
opacity: .5; 
} 
100%{ 
background-size: 100% 100%; 
background-position: -50% -50%; 
opacity: .3; 
} 
} 

@keyframes cloud1 { 
0%{ 
    background-size: 200% 200%; 
background-position: 150% 150%; 
opacity: .8; 
} 
50%{ 
background-size: 150% 150%; 
background-position: 0% 0%; 
opacity: .5; 
} 
100%{ 
background-size: 100% 100%; 
background-position: -50% -50%; 
opacity: .3; 
} 
} 
@-o-keyframes cloud1 { 
0%{ 
    background-size: 200% 200%; 
background-position: 150% 150%; 
opacity: .8; 
} 
50%{ 
background-size: 150% 150%; 
background-position: 0% 0%; 
opacity: .5; 
} 
100%{ 
background-size: 100% 100%; 
background-position: -50% -50%; 
opacity: .3; 
} 
} 
input[type="checkbox"] { 
display: none; 
} 

input[type="checkbox"] + label:before{ 

content: ""; 
position: relative; 
float: right; 
margin: 1px; 
padding: 2px; 
background-image: url("../icons/pauseButton.png"); 
background-size: 100% 100%; 
background-position: center; 
background-repeat: no-repeat; 
height: 27px; 
width: 27px; 
border-radius: 2px; 
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); 
background-color: rgba(110, 0, 250, .5); 
} 

input[type="checkbox"]:checked + label:before{ 
content: ""; 
position: relative; 
float: right; 
margin: 1px; 
padding: 2px; 
background-image: url("../icons/playButton.png"); 
background-size: 100% 100%; 
background-position: center; 
background-repeat: no-repeat; 
height: 27px; 
width: 27px; 
border-radius: 2px; 
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); 
background-color: rgba(110, 0, 250, .5);  
}

来源

2014-07-07 user3800453

您可以使用animation-play-state，然后使用jQuery来切换您设置动画的元素，在此设置为paused一个类

动画播放状态CSS属性确定动画正在运行还是暂停。您可以查询此属性的值，以确定动画是否当前正在运行;另外，您可以将其值设置为暂停并恢复播放动画。

恢复已暂停的动画将从其暂停播放的位置开始动画，而不是从动画序列的开头开始。

E.g，类可能仅仅是：

.paused{ 
    animation-play-state: paused; 
}

另一种方法是将CSS属性直接设置。

来然后用javascript取决于复选框状态改变很可能是利用jQuery的（我很欣赏你还没有提到它）做的，最简单的方法如：

$('#toggle').click(function(e) { 
     $('#cloud').toggleClass('paused', $('#toggle').is(':checked')); 
    });

来源

2014-07-07 16:03:46 SW4

抱歉，我还是新的这一切我在接下来有点麻烦。我已经把这个脚本放在头上，这个（.paused）类在CSS中，复选框仍然不会改变动画的播放状态，我是否需要设置#cloud和＃cloud1规则来播放状态也在运行？我真的很感谢帮助:) – user3800453

我需要为#toggle id创建任何css规则吗？ – user3800453

如何使用复选框来更改动画播放状态

回答

相关问题