CODEWITHSUNDEEP
csscss-animationsanimatewithduration
marble
marble

Reputation: 61

how to prevent movement jumping when updating css animation duration using javascript

I am trying to create a situation where the two buttons that change the speed will make the ball continue in the same direction and from the same spot (with its updated speed). Instead, It jumps: It starts from a different position and not in the same direction.

Any way this can be achieved?

<!DOCTYPE html>
<html>
  <head>
    <style> 
      #dhorizontal {
        width: 40px;
        height: 40px;
        position: relative;
        animation-name: leftRight;
        animation-duration: 4.2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      @keyframes leftRight {
        0%   {left:0px; top:0px;}
        50%  {left:460px; top:0px;}
        100%  {left:0px; top:0px;}
      }
    </style>
    <script>
      function speed1()
      {
          document.getElementById("dhorizontal").style.animationDuration = "3.4s";
      }
      function speed2()
      {
          document.getElementById("dhorizontal").style.animationDuration = "1.4s";
      }
    </script>    
  </head>
  <body style="margin: 0px;">
    <div style="background: yellow; width: 500px; height: 40px;">
      <div id="dhorizontal">
          <img id="ball" src="ball.png" width="40">
      </div>
    </div>
    <br>
    <button onclick="speed1()">speed 1</button>
    <button onclick="speed2()">speed 2</button>
  </body>
</html>

Upvotes: 1

Views: 45

Answers (0)

Related Questions