javascript - Animation in CSS3 with JS trigger -

i've problem when use function rotate blue square can use once. after you'll have reload page in order able use rotate function once again. also, when have rotated 120degrees clicking once, square resets , goes starting position.

so need 2 things.

1. fix can click rotation function multiple times , keeps rotating.
2. prevent square reseting it's position.

i made fiddle out of code: https://jsfiddle.net/kv7may8t/2/

document.getelementbyid('button1').addeventlistener('click', function() {     document.getelementbyid('blue').classlist.add('rotateright'); }); 

summarize of function: hit button1 trigger function adding class "rotateright" blue square makes rotate 120degrees.

answer of first thing remove class fix first issue:

var bluediv = document.getelementbyid('blue')  bluediv.addeventlistener("animationend", function() { bluediv.classlist.remove('rotateright');       bluediv.classlist.remove('rotateleft'); }); 

check fiddle. (you can click rotation function multiple times , keeps rotating. - solved)

and answer second thing is(apply in right only):

use: animation-iteration-count: forwards;

check fiddle here. (prevent square resetting it's position- solved)