Question

如何使用复选框将动画播放状态从播放更改/切换到暂停（我是否必须使用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);    
}

Answer 1

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

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

恢复暂停的动画将从中开始动画   在它停顿的时候离开了，而不是从它开始   动画序列的开头。

例如，课程可能只是：

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

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

根据复选框状态使用Javascript进行更改的最简单方法可能是利用jQuery（我很感谢你没有提到它），例如：

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

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

1 个答案: