Как сделать анимацию отключения кнопки?

Question

[zeni1agent]

У меня есть вот такой код

$('.tset1').on('click', function(e){
  e.preventDefault();
$('.test1').toggleClass('test1act');
})

.test1{ 
animation-duration: 3s;  
animation-name: slidein;  
animation-direction: reverse;
}
 .test1act{
animation-duration: 3s;  
animation-name: slidein;  
}
@keyframes slidein {
0% {
  background-color: #2b6f1e;	
  }
100%  {
background-color: #663e9c;	
  }
  75% {
background-color: #fd0;	
  }
}

И у меня возникла проблема в том что анимация включается каждый раз когда обновляешь страницу
и она работает неправильно.
Мне необходимо что бы при нажатий кнопки работала анимация, а при повторном нажатий обратная анимация, и так по кругу.
Как мне это сделать?

Answer 1

[origami1024]

2 класса и 2 анимации, и 2 раза toggleClass на клике. Один класс будет выключаться, второй включаться

Comments

[zeni1agent]

Так что ли?

$('.test1').toggleClass('test1act').toggleClass('test1act2');

[origami1024]

Да, так неплохо.
Класс одной анимации изначально есть на кнопке, а класс второй - нет, тогда будет работать.

[zeni1agent]

origami1024, Проблема в том что если я так сделаю то test1act и test1act2 появятся одновременно.

[origami1024]

Вот короче, набросал из твоего кода
https://jsfiddle.net/xsL9qh4v/1/

[zeni1agent]

origami1024,
Хорошо но мне нужно что бы анимация работала когда я нажимаю на кнопку а не когда я навожу на нее мышкой.
я немного адаптировал его

.test1 {
  animation-duration: 2s;
}
.test1Act{
  animation-name: slidein;
   background-color: #fd0;
}
.test1ActReverse{
  background-color: red;
  animation-name: slidein2;
  animation-direction: reverse;
}
@keyframes slidein {
  0% {
    background-color: red;
  }
  50% {
    background-color: #663e9c;
  }
  100% {
    background-color: #fd0;
  }
}
@keyframes slidein2 {
  0% {
    background-color: red;
  }
  50% {
    background-color: #663e9c;
  }
  100% {
    background-color: #fd0;
  }
}

Но все равно при перезагрузке страницы анимация срабатывать не должна

[origami1024]

Легко
https://jsfiddle.net/k1svy9tr/