Speed up the CSS Animation using javascript on click

Question

I've made this pretty simple web page that has a centered image. When you click it, it starts to spin.

Now I'm trying to use JavaScript to make it so that when you click it again, it starts to spin faster and faster, I've looked at multiple similar stack overflow questions on this but I just don't seem to be able to get this to work:

var img = document.querySelector("#spin")
img.addEventListener('click', onClick, false);

var deg = 360;

function onClick() {

  deg += 90;

  var stylesheet = document.styleSheets[0];
  var spinRule = stylesheet.cssRules[0];
  var spinRule_To = spinRule.cssRules[1];
  var spinRule_To_Style = spinRule_To.style;
  spinRule_To_Style.setProperty("transform:rotate", deg);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#tbl {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
#tbl td {
  vertical-align: middle;
  text-align: center;
}
img:target {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

<table id="tbl">
  <tr>
    <td>
      <div>
        <a href="#spin">
          <img id="spin" src="http://h08.us/Hob-Cos.png" title="THE MEMES ARE BACK BOIS">
        </a>
      </div>
    </td>
  </tr>
</table>

Abhishek Pandey · Accepted Answer · 2017-01-31 06:07:14Z

1

If jquery id allowed, try this.

In you code you were increasing deg of rotation with var deg but this won't increase speed, you need to decrease time duration of animation with every click to speedup animation.

var duration = 4000;
$('#spinTrigger').click(function(){
  $('#spin').css("animation-duration", duration + 'ms');
  duration -= 200;
  if (duration == 0) {
    duration = 100;
  }
})

@keyframes spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
#tbl {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
#tbl td {
  vertical-align: middle;
  text-align: center;
}
img{
  width:300px;
}
img:target{
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td>
      <div>
        <a href="#spin" id="spinTrigger">
          <img id="spin" src="http://h08.us/Hob-Cos.png" title="THE MEMES ARE BACK BOIS">
        </a>
      </div>
    </td>
  </tr>
</table>

edited Jan 31, 2017 at 6:07

answered Jan 31, 2017 at 5:33

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

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

3 Comments

Hobnob11 Over a year ago

j Query is fine, changing the animation time is what i was doing before, but the image starts jumping all over the place + you cannot go faster than 1ms

Abhishek Pandey Over a year ago

Yes! we cannot go faster than 100ms its max limit of any animation, and for jumping img, we can figure out to solve it.

Abhishek Pandey Over a year ago

The reason behind jumping image is img's rotation deg per 100ms, for example, if animation duration is 4000 then img will rotate 90 degs per second and if animation duration is 100 then img will rotate 360 degs per second. with every click on img, img will rotate or jump more quickly to manage equilibrium between rotation and duration. I guess.

Collectives™ on Stack Overflow

Speed up the CSS Animation using javascript on click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related