This is just test code so don't think about it too much. But anyways I cant understand why animation play states will work and change fine when a class is used but not when I use an ID.
Is there other rules when using ID's or can you not use ID's?
Any information would be very helpful.
WORKING VERSION USING CLASSES
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 2s infinite; /* Chrome, Safari, Opera */
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation: mymove 2s infinite;
animation-play-state: paused;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 250px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<button onclick="playTest()">Play</button>
<button onclick="playTest2()">Pause</button>
<script>
function playTest(){
document.getElementById("notMyDIV").style.WebkitAnimationPlayState = "running"; // Code for Chrome, Safari, and Opera
document.getElementById("notMyDIV").style.animationPlayState = "running";
}
function playTest2(){
document.getElementById("notMyDIV").style.WebkitAnimationPlayState = "paused"; // Code for Chrome, Safari, and Opera
document.getElementById("notMyDIV").style.animationPlayState = "paused";
}
</script>
<div id="notMyDIV">
<div id="myDIV"></div>
</div>
</body>
</html>NON-WORKING ID VERSION
<html>
<head>
<style>
.myDiv {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 2s infinite; /* Chrome, Safari, Opera */
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation: mymove 2s infinite;
animation-play-state: paused;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 250px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<button onclick="playTest()">Play</button>
<button onclick="playTest2()">Pause</button>
<script>
function playTest(){
document.getElementById("notMyDIV").style.WebkitAnimationPlayState = "running"; // Code for Chrome, Safari, and Opera
document.getElementById("notMyDIV").style.animationPlayState = "running";
}
function playTest2(){
document.getElementById("notMyDIV").style.WebkitAnimationPlayState = "paused"; // Code for Chrome, Safari, and Opera
document.getElementById("notMyDIV").style.animationPlayState = "paused";
}
</script>
<div id="notMyDIV">
<div class="myDiv" id="myDIV"></div>
</div>
</body>
</html>
The issue is not due to the div having a class or not. The reason the second example fails is that the CSS selector (
.myDiv) is not selecting thediv#notMyDiv, but is selecting the childdiv.myDiv, to which the animation play state is not being applied to.In the first div, the selector is selecting all divs (
div), which is why it works.Here is the second snippet, except the javascript applies the play state to the child div, selected by the CSS selector.