как я могу использовать флажок, чтобы изменить состояние воспроизведения анимации

Как использовать флажок, чтобы изменить/переключить состояние воспроизведения анимации из воспроизведения в паузу (нужно ли мне использовать 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 состояния анимационного воспроизведения определяет, работает или приостановлена анимация . Вы можете запросить значение этого свойства, чтобы определить , работает ли анимация в настоящий момент; кроме того, вы можете установить его значение для приостановки и возобновления воспроизведения анимации.

Возобновление анимации с паузой запустит анимацию, откуда остановился в то время, когда она была приостановлена, вместо того, чтобы начинать с начала последовательности анимации.

например, класс может быть просто:

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

Альтернативой было бы установить свойство CSS непосредственно.

Самый простой способ затем изменить с Javascript в зависимости от CheckBox государства, скорее всего, будет использовать JQuery (я ценю вас нету упоминали), чтобы сделать, например:

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

источник

2014-07-07 16:03:46 SW4

извините я еще новичок все это и у меня немного неприятностей. Я поставил этот скрипт в голову и этот (.paused) класс в css, флажок все равно не изменит состояние воспроизведения анимации, нужно ли мне также устанавливать правила #cloud и # cloud1 для запуска состояния? Я действительно ценю помощь :) – user3800453

Мне нужно создать любое правило css для идентификатора #toggle? – user3800453

как я могу использовать флажок, чтобы изменить состояние воспроизведения анимации

ответ

Смежные вопросы