javascripthtmlcsscss-animationswebkit-animation

Can someone please explain why one of these webkit animation functions works and the other doesn't. I know its the class vs ID but why?

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>

Solution

  • 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 the div#notMyDiv, but is selecting the child div.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.

    <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("myDIV").style.WebkitAnimationPlayState = "running"; // Code for Chrome, Safari, and Opera
      document.getElementById("myDIV").style.animationPlayState = "running";
    }

    function playTest2(){
      document.getElementById("myDIV").style.WebkitAnimationPlayState = "paused"; // Code for Chrome, Safari, and Opera
      document.getElementById("myDIV").style.animationPlayState = "paused";
    }
    </script>
    <div id="notMyDIV">
      <div class="myDiv" id="myDIV"></div>
    </div>
  </body>
</html>