using javascript to control CSS3 animation pause and running

Question

I'm trying to use pure javascript to create a CSS3 animation, it works. And then I want make this animation can pause when mouse enter the container,and running when mouse leave the container. I use animate.pause,animate.play& animationPlayState,but it still doesn't work. So,how to make it works? Sorry my English, Thank you very much!

Here is my code:

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>

Rachel Gallen · Accepted Answer · 2016-06-23 08:03:10Z

1

Apparently for Chrome, Safari and Opera the correct js syntax to pause an animation is

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

(note the webkit at the beginning). This is according to w3schools, however despite a couple of attempts i was unable to get it working. (see below)

window.onload = function() {
  var ulNode = document.querySelector("#container"),
	frames = [
		{left: '0px'},
		{left: '-700px'},
		{left: '-100%'}
	],
	timing = {
		duration: 10000,
		iterations: Infinity,
	};
  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>

answered Jun 23, 2016 at 8:03

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Coco Tsau Over a year ago

so kind of you. yes, i also think WebkitAnimationPlayState is correct syntax, but it doesn't work. Maybe has other reason or unsupported.

Rachel Gallen Over a year ago

yes, it's unfortunate, i tried it with and without initialising it in css, but to no avail :(

Qwertiy Over a year ago

Webkit or webkit with lowercase first letter?

Rachel Gallen Over a year ago

Uppercase @Qwertiy

Collectives™ on Stack Overflow

using javascript to control CSS3 animation pause and running

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related