При добавлении класса анимация с keyframes работает, а при удалении нет, хотя transition задано

#css #анимация #css_animation #keyframes

В этом примере все достаточно очевидно и отрабатывает правильно



$('div').click(function() {
  $('div').toggleClass('wide');
});
div {
  width: 80px;
  height: 30px;
  background-color: green;
  transition: all 0.4s ease-in-out;
}
.wide {
  width: 140px;
  background-color: blue;
}







Но мне необходимо усложнить анимацию, как это сделать правильно?
При добавлении keyframes анимация отрабатывает только при добавлении класса, а при
удалении все происходит без анимации.



$('div').click(function() {
  $('div').toggleClass('wide');
});
div {
  width: 80px;
  height: 30px;
  background-color: green;
  transition: all 0.4s ease-in-out;
}
@keyframes blue {
  50% {
    background-color: blue;
  }
  100% {
    width: 200px;
    background-color: blue;
  }
}
.wide {
  animation-name: blue;
  animation-duration: 0.4s;
  animation-fill-mode: both;
}







Как мне необходимо организовать код, чтобы анимация по клику отрабатывала "в обе
стороны"?
    

Ответы

Ответ 1

Анимации (animation), в отличие от переходов (transition), работают только в одну
сторону. Переключение направления нормально не поддерживается.

Вообще-то существует свойство animation-direction, но оно не поможет, потому что,
если имя анимации не меняется, то элемент продолжает "проигрывать" одну и ту же последовательность.
Если изменить направление, то анимация будет всё ещё в завершённом состоянии, и просто
изменится конечное значение, которое браузер и применит моментально. И удаление имени
анимации animation-name не поможет, потому что в этом случае сбросится и конечное значение,
что вас не устроит (animation-fill-mode у вас both). Что касается переходов, то они
существуют отдельно от анимаций, анимировать одни и те же свойства двумя способами
бессмысленно, а свойства переходов на анимации не влияют.

Если хотите анимировать в обе стороны, то нужно использовать или анимации с двумя
отдельными @keyframes для каждого направления, или переходы, которые поддерживают изменение
направления.

См. также:


Reverse Keyframe animation with Javascript
Possible to reverse a css animation on class removal?


Ответ 2

Можно указывать несколько transition'ов через запятую, а также сдвигать их начало:



$('div').click(function() {
  $('div').toggleClass('wide');
});
div {
  width: 80px;
  height: 30px;
  background-color: green;
  transition: width 4s ease-in-out, background-color 2s ease-in-out;
  transition-delay: 0s, 2s;
}

.wide {
  width: 380px;
  background-color: blue;
  transition-delay: 0s;
}

section {
  height: 10px;
  border-left: 80px silver solid;
  border-right: 150px silver solid;
  background-color: red;
  width: 150px;
}