CSS3アニメーションの一時停止と実行を制御するためにJavaScriptを使用

私はCSS3アニメーションを作成するために純粋なjavascriptを使用しようとしています。そして、マウスがコンテナに入ったときにこのアニメーションを一時停止させ、マウスがコンテナを離れるときに実行するようにします。私はanimate.pause、animate.play & animationPlayStateを使用しますが、それでも動作しません。それで、それを動作させる方法は？すみません、私の英語は、ありがとう！ここでCSS3アニメーションの一時停止と実行を制御するためにJavaScriptを使用

私のコードです：クロム、SafariやOperaのためどうやら

window.onload = function() { 
 
\t var ulNode = document.querySelector(".container>ul"), 
 
\t \t frames = [ 
 
\t \t \t {left: 0}, 
 
\t \t \t {left: '-700px'}, 
 
\t \t \t {left: 0} 
 
\t \t ], 
 
\t \t timing = { 
 
\t \t \t duration: 10000, 
 
\t \t \t iterations: Infinity, 
 
\t \t }; 
 
\t ulNode.animate(frames, timing); 
 
\t var player = ulNode.animate(frames); 
 

 
\t ulNode.onmouseover = function(){ 
 
\t \t // player.pause(); 
 
\t \t this.style.animationPlayState = "paused"; 
 
\t } 
 
\t ulNode.onmouseout = function(){ 
 
\t \t // player.play(); 
 
\t \t this.style.animationPlayState = "running"; 
 
\t } 
 
}

body,ul{margin: 0; padding: 0;} 
 
.container{ 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
ul{list-style-type: none; position: absolute; left: 0; top: 0; width: 1200px;} 
 
ul>li{width: 100px; height: 100px; float: left;} 
 
ul>li:nth-child(odd){background-color: red;} 
 
ul>li:nth-child(even){background-color: green;} 
 
/*@keyframes doMove{ 
 
\t form{left: 0;} 
 
\t 50%{left: -700px;} 
 
\t to{left: 0px;} 
 
} 
 
ul{animation: doMove 20s linear infinite;} 
 
.container:hover ul{animation-play-state:paused;}*/

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>CSS3 Animation</title> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
\t <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
</div> 
 
</body> 
 
</html>

出典

2016-06-22 Coco Tsau

アニメーションを一時停止するための正しいjsの構文は

document.getElementById("myDIV").style.WebkitAnimationPlayState = "paused";

です（ない最初のWebkit）。これはw3schoolsによると、いくつかの試みにもかかわらず、私はそれを働かせることができませんでした。あなたのとても親切

window.onload = function() { 
 
    var ulNode = document.querySelector("#container"), 
 
\t frames = [ 
 
\t \t {left: '0px'}, 
 
\t \t {left: '-700px'}, 
 
\t \t {left: '-100%'} 
 
\t ], 
 
\t timing = { 
 
\t \t duration: 10000, 
 
\t \t iterations: Infinity, 
 
\t }; 
 
    ulNode.animate(frames, timing); 
 
    
 
    ulNode.onmouseover = function() { 
 
    document.getElementById("container").style.WebkitAnimationPlayState = "paused"; 
 
    } 
 
    ulNode.onmouseout = function() { 
 
    document.getElementById("container").style.WebkitAnimationPlayState = "running"; 
 
    } 
 
};

body, 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 1200px; 
 
} 
 
ul>li { 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
} 
 
ul>li:nth-child(odd) { 
 
    background-color: red; 
 
} 
 
ul>li:nth-child(even) { 
 
    background-color: green; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>CSS3 Animation</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-06-23 08:03:10

（下記参照）。はい、私も 'WebkitAnimationPlayState'は正しい構文だと思うが、うまくいきません。他の理由があるかサポートされていない可能性があります。 –

はい、残念ですが、CSSで初期化して試してみましたが、無駄にしませんでした:( –

'Webkit'または' webkit'の小文字の最初の文字？ – Qwertiy

CSS3アニメーションの一時停止と実行を制御するためにJavaScriptを使用

答えて

関連する問題