JavaScriptを使用してCSS3アニメーションを一時停止して再開する方法は？

私はGoogleにこの問題の解決策を見てきましたが、これまでのところ運がありません。画像をクリックしてCSS3アニメーション（画像スライドショー）を一時停止し、画像をクリックして同じアニメーションに戻したいと思います。JavaScriptを使用してCSS3アニメーションを一時停止して再開する方法は？

私はスライドショーを一時停止する方法を知っていますし、一度再開することもできましたが、一時停止して複数回再開しようとすると動作を停止します。私は、任意のJSライブラリ（例えば、jQueryの）または他の外部のソリューションを使用したくない

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.pic { 
    position: absolute; 
    opacity: 0; 
} 
#pic1 { 
    -webkit-animation: pic1 4s infinite linear; 
} 
#pic2 { 
    -webkit-animation: pic2 4s infinite linear; 
} 
@-webkit-keyframes pic1 { 
    0% {opacity: 0;} 
    5% {opacity: 1;} 
    45% {opacity: 1;} 
    50% {opacity: 0;} 
    100% {opacity: 0;} 
} 
@-webkit-keyframes pic2 { 
    0% {opacity: 0;} 
    50% {opacity: 0;} 
    55% {opacity: 1;} 
    95% {opacity: 1;} 
    100% {opacity: 0;} 
} 
</style> 
<script type="text/javascript"> 
function doStuff(){ 
    var pic1 = document.getElementById("pic1"); 
    var pic2 = document.getElementById("pic2"); 

    pic1.style.webkitAnimationPlayState="paused"; 
    pic2.style.webkitAnimationPlayState="paused"; 

    pic1.onclick = function(){ 
     pic1.style.webkitAnimationPlayState="running"; 
     pic2.style.webkitAnimationPlayState="running"; 
    } 

    pic2.onclick = function(){ 
     pic1.style.webkitAnimationPlayState="running"; 
     pic2.style.webkitAnimationPlayState="running"; 
    } 
} 
</script> 
</head> 
<body> 
    <img id="pic1" class="pic" src="photo1.jpg" /> 
    <img id="pic2" class="pic" src="photo2.jpg" onclick="doStuff()" /> 
</body>                 
</html>

：ここに私のコードはどのように見えるかです。

私の推測では、doStuff機能の中の私の機能はまだ実行されており、その理由はpauseとが一度しか働かないということです。

これらの機能を1回クリックした後にクリアする方法はありますか？あるいは私はこれを全く間違ったやり方でしようとしていますか？ヘルプは高く評価されます。 :)ここで

出典

2011-04-27 nqw1

はJavaScriptを使用してソリューションです：

var imgs = document.querySelectorAll('.pic'); 
 

 
for (var i = 0; i < imgs.length; i++) { 
 
    imgs[i].onclick = toggleAnimation; 
 
    imgs[i].style.webkitAnimationPlayState = 'running'; 
 
} 
 

 
function toggleAnimation() { 
 
    var style; 
 
    for (var i = 0; i < imgs.length; i++) { 
 
    style = imgs[i].style; 
 
    if (style.webkitAnimationPlayState === 'running') { 
 
     style.webkitAnimationPlayState = 'paused'; 
 
     document.body.className = 'paused'; 
 
    } else { 
 
     style.webkitAnimationPlayState = 'running'; 
 
     document.body.className = ''; 
 
    } 
 
    } 
 
}

.pic { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
#pic1 { 
 
    -webkit-animation: pic1 4s infinite linear; 
 
} 
 

 
#pic2 { 
 
    -webkit-animation: pic2 4s infinite linear; 
 
} 
 

 
@-webkit-keyframes pic1 { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    } 
 
    45% { 
 
    opacity: 1; 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes pic2 { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
    55% { 
 
    opacity: 1; 
 
    } 
 
    95% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.paused { 
 
    background-color: #ddd; 
 
}

<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff"> 
 
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">

jQueryのソリューション（短く、より読みやすい）：

var imgs = $('.pic'), 
 
    playState = '-webkit-animation-play-state'; 
 

 
imgs.click(function() { 
 
    imgs.css(playState, function(i, v) { 
 
    return v === 'paused' ? 'running' : 'paused'; 
 
    }); 
 
    $('body').toggleClass('paused', $(this).css(playState) === 'paused'); 
 
});

.pic { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
#pic1 { 
 
    -webkit-animation: pic1 4s infinite linear; 
 
} 
 

 
#pic2 { 
 
    -webkit-animation: pic2 4s infinite linear; 
 
} 
 

 
@-webkit-keyframes pic1 { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    } 
 
    45% { 
 
    opacity: 1; 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes pic2 { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    } 
 
    55% { 
 
    opacity: 1; 
 
    } 
 
    95% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.paused { 
 
    background-color: #ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff"> 
 
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">

出典

2011-04-27 13:16:34

このコメントは少し遅れていますが、これはありがとうございます！それは問題を解決しました。 – nqw1

128

私は、CSSクラスを使って簡単に行うことができます。これにより、すべてのブラウザに接頭辞を使用できます。

.paused{ 
    -webkit-animation-play-state:paused; 
    -moz-animation-play-state:paused; 
    -o-animation-play-state:paused; 
    animation-play-state:paused; 
}

このクラスをアニメーション要素に追加または削除するだけで、アニメーションを一時停止/再開することができます。

出典

2012-10-09 09:27:33

これはより良い解決策であり、受け入れられた答えであるはずです。 –

これは受け入れられた回答でなければなりません – psychobunny

例を示します：http://jsfiddle.net/fRzwS/313/ – ayjay

私はそれをテストしましたが、おそらくこのようなものでしょうか？

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.pic { position: absolute;opacity: 0; } 
.pic1 { -webkit-animation: pic1 4s infinite linear; } 
.pic2 { -webkit-animation: pic2 4s infinite linear; } 
@-webkit-keyframes pic1 { 0% {opacity: 0;} 
          5% {opacity: 1;} 
          45% {opacity: 1;} 
          50% {opacity: 0;} 
          100% {opacity: 0;} } 
@-webkit-keyframes pic2 { 0% {opacity: 0;} 
          50% {opacity: 0;} 
          55% {opacity: 1;} 
          95% {opacity: 1;} 
          100% {opacity: 0;} } 
</style> 
<script type="text/javascript"> 
function doStuff(){ 
    var pic1 = document.getElementById("pic1"); 
    var pic2 = document.getElementById("pic2"); 

    pic1.className="pic paused"; 
    pic2.className="pic paused"; 

    pic1.onclick = function(){ 
     pic1.className="pic pic1"; 
     pic2.className="pic pic2"; 
    } 
    pic2.onclick = function(){ 
     pic1.className="pic pic1"; 
     pic2.className="pic pic2"; 
    } 
} 
</script> 
</head> 
<body> 
    <img id="pic1" class="pic pic1" src="photo1.jpg" /> 
    <img id="pic2" class="pic pic2" src="photo2.jpg" onclick="doStuff()" /> 
</body>                 
</html>

出典

2014-04-15 19:27:53 user40521

これは私が親要素からクラスの変更をトリガして、私のページではルイスHijarrubia

.pause { 
     -webkit-animation-play-state: paused !important; 
     -moz-animation-play-state: paused !important; 
     -o-animation-play-state: paused !important; 
     animation-play-state: paused !important; 
    }

によって与えられた答えを拡張することです。私がしたかったのは、画像を内部で回転させることでした。しかし、私はホバーを使用していなかったので、一時停止されたクラスの追加はアニメーション状態に何の変化ももたらさなかったようです。

！importantを使用すると、これらの値が新しい追加されたCSS値によって上書きされます。

出典

2014-07-17 05:41:45 tensai

明確にするために、これはCSSの特異性のためです。「インライン」スタイルはデフォルトでスタイルシートからルールをオーバーライドするため、Simeの回答などの要素に直接プロパティを追加するスクリプトにはこの問題はありません。 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – xec

これは、HTMLとCSSによって特定された問題です。最高でこれはコメントでなければならない、それは実際の質問に答えるものではない。 –

投稿されていない場合は、この回答を投稿するためにここに来ました。私の場合、いくつかの同時アニメーションを一時停止する必要があり、これが最も簡単な方法であることがわかりました。また、必要に応じて '.pause：hover'のようなエフェクトを追加することもできます。 –

var e = document.getElementsById("Your_Id"); 


e.addEventListener("animationstart", listener, false); 
e.addEventListener("animationend", listener, false); 
e.addEventListener("animationiteration", listener, false); 


function listener(e) { alert("Your POSITION parameter:" + .target.style.position); 
    switch(e.type) { 
    case "animationstart": 
     d = "Started: elapsed time is " + e.elapsedTime; 
     break; 
    case "animationend": 
     d = "Ended: elapsed time is " + e.elapsedTime; 
     break; 
    case "animationiteration": 
     d= "New loop started at time " + e.elapsedTime; alert("pausing for 1 seconddddddd!!!!!!!"); e.target.style.animationPlayState = "paused";  window.setTimeout(function(){e.target.style.animationPlayState = "running";}, 1000); 
     break; 
    } 
}

出典

2015-07-20 08:20:03

JavaScriptを使用してCSS3アニメーションを一時停止して再開する方法は？

答えて

関連する問題