Animation in CSS3 with JS trigger

Question

I've a problem that when you use the function to rotate the blue square you can only use it once. After that you'll have to reload the page in order to be able to use the rotate function once again. Also, when you have rotated 120degrees by clicking once, the square then resets itself and goes back to starting position.

So I need help with two things.

1. Fix so you can click the rotation function multiple times and it keeps rotating.
2. Prevent the square from reseting it's position.

I made a fiddle out of the code: https://jsfiddle.net/kv7may8t/2/

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.add('rotateright');
});

Summarize of function: Hit button1 to trigger function adding class "rotateright" to the blue square which makes it rotate 120degrees.

Answer 1

Try this code:

    document.getElementById('button1').addEventListener('click', function() {
   var degrees +=120;
   var time = 4;
   document.getElementById('blue').style.WebkitTransitionDuration= time + "s";
   document.getElementById('blue').style.transform = "rotate(" +degrees + "deg)";
});

To adjust change degrees and duration.

Answer 2

Your code is correct just need some modification, you are using transform, when you add class it rotates that div. You just need to remove class before adding it. Here is fiddle . Use this code

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateright');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateright');    
    },100)

});

document.getElementById('button2').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateleft');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateleft');        
    },100)
});


document.getElementById('button3').addEventListener('click', function() {
    document.getElementById('red').classList.add('animate');
});

document.getElementById('button4').addEventListener('click', function() {
    document.getElementById('red').classList.remove('animate');
});

Don't forget to use setTimeout as after removal class, it needs some time. So use setTimeout and then add class.

Answer 3

Answer of first thing remove class will fix your first issue:

var bluediv = document.getElementById('blue')

bluediv.addEventListener("animationend", function() {
bluediv.classList.remove('rotateright');
      bluediv.classList.remove('rotateleft');
});

Check Fiddle. (You can click the rotation function multiple times and it keeps rotating. - Solved)

And Answer for second thing is(apply in right only):

Use: animation-iteration-count: forwards;

Check Fiddle here. (Prevent the square from resetting it's position- Solved)