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

В этом примере все достаточно очевидно и отрабатывает правильно
$('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; }

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

Ответ

Анимации (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?