После завершения анимации :click запускается :hover и всё портит

[Jack-Jack]

Здравствуйте! Анимировал кнопку при нажатии, при этом обработчик события :click запускает анимацию нажатия, затем ее сбрасывает. Проблема в том, что сразу после сброса запускается css анимация :hover, которая всё портит.
Можно ли это исправить или может есть более удачный способ всё это организовать?)
Вот код:
HTML

<div class="left-button" onclick="left_click()"></div>

CSS

.left-button:hover,.right-button:hover {
animation: button-hover 1s forwards;
}
@keyframes button-hover{
	to{background-color: rgba(66,66,66,1);}
}
@keyframes button-click{
	from{background-color: rgba(66,66,66,1);}
	50%{background-color: rgba(66,66,66,0.8);}
	to{background-color: rgba(66,66,66,1);}
}

JS

function right_click_reset(){
	$('.right-button').css("animation","");
};
function right_click(){
	$('.right-button').css("animation","button-click 1s linear forwards");
	setTimeout(right_click_reset,1000);
};

P.S. Изначально задумывалось, что при наведении кнопка будет проявляться из почти прозрачной, а при нажатии - слегка мигать.

[nekada]

Может hover задать в js тоже?
Вот тема по теме задать hover для элемента

Вот еще интересная тема https://github.com/terotests/css

jquery hover method

$("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
});