CSS3 анимация onclick

Question

У меня две фигуры, одна синяя и одна красная. У меня есть четыре кнопки, которые используют JavaScript для переключения CSS-правил синего и красного квадратов.

Проблема в том, что, когда я нажимаю кнопку «play red», чтобы начать оживлять красный квадрат, он исчезает. Я проверил код, но не знаю, что я пропустил здесь.

Вторая проблема возникает, когда Im использует левую/правую кнопку для поворота синего квадрата. Когда я ударил его при первом повороте. Но всякий раз, когда я нажимаю кнопку влево/вправо, он сбрасывается в исходное положение, а затем снова поворачивает на 60 градусов. Моя амбиция заключается в том, чтобы отключить этот сброс позиции. Поэтому, если вы нажмете правую/левую кнопку дважды, синий квадрат должен теперь повернуться на 120 градусов.

Fiddle: https://jsfiddle.net/pbukq2vu/

Правая кнопка :

document.getElementById('button1').addEventListener('click', function() { 
    document.getElementById('blue').classList.remove('rotateright', 'rotateleft'); 
    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'); 
}); 

Answer 1

Заменить два класса с CSS

#red { 
    background-color:#ffaaaa; 
    width:50px; 
    height:50px; 
    position:relative; 
    margin-left: 150px; 
    margin-top:20px; 
    border:thin; 
    border-color:#000; 
    border-width:1px; 
    -webkit-transition: left 3s; 
    transition: left 3s; 
    left:10px; 
} 
.animate { 
    left: 100px !important; 
} 

JSfiddle