I am attempting to create a CSS3 animation using pure JavaScript. The animation is working properly, but I now want it to pause when the mouse enters the container and resume running when the mouse leaves the container. I have tried using animate.pause, animate.play, and animationPlayState, but the functionality is still not working as intended. Can someone guide me on how to make it work correctly? Please excuse any language mistakes, thank you!
This is the code I have written:
window.onload = function() {
var ulNode = document.querySelector(".container>ul"),
frames = [
{left: 0},
{left: '-700px'},
{left: 0}
],
timing = {
duration: 10000,
iterations: Infinity,
};
ulNode.animate(frames, timing);
var player = ulNode.animate(frames);
ulNode.onmouseover = function(){
// player.pause();
this.style.animationPlayState = "paused";
}
ulNode.onmouseout = function(){
// player.play();
this.style.animationPlayState = "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;}
/*@keyframes doMove{
form{left: 0;}
50%{left: -700px;}
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">
<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>