Почему анимация не запускается при исчезновении?

Существует несколько возможных причин, по которым анимация не запускается при исчезновении блока:

1. Возможно, CSS анимация задана для события появления блока, но не задана для события исчезновения. Проверьте CSS код и убедитесь, что анимация задана и для события исчезновения блока.

2. JavaScript код, который управляет добавлением и удалением класса <i>active</i>, может быть устроен таким образом, что не вызывает запуск анимации при удалении класса. Проверьте JavaScript код и добавьте необходимые инструкции для запуска анимации при удалении класса.

3. Возможно, анимация не срабатывает из-за наличия браузерных или CSS свойств, которые могут мешать корректной работе анимации. Проверьте исходный код браузера и убедитесь, что нет конфликтов с другими стилями или правилами.

Чтобы исправить проблему, можно попробовать следующие варианты:

1. Добавить анимацию для события исчезновения блока в CSS коде.

2. В JavaScript коде добавить необходимые инструкции для запуска анимации при удалении класса <i>active</i>.

3. Проверить наличие конфликтов со стилями или другими свойствами и устранить их.

4. При использовании встроенных анимаций вроде jQuery, убедиться, что корректно обрабатываются события удаления классов.

5. Возможно, использование transition вместо анимации поможет упростить код и избежать проблем с загрузкой исчезновения блока.

Потому что свойство visibility - дискретное. У него между значениями hidden и visible нет промежуточных значений (по типу visible 0.5, visible 0.7). 
 Когда элемент становится visible, у него opacity = 0 и дальше анимация работает на opacity 
 Когда элемент скрывается, у него visibility мгновенно становится hidden, и он скрывается, там нечего анимировать. 
 
 Решение тут видится с использованием javascript 
 Вы можете слушать событие transitionend, чтобы выключать дискретные свойства по окончанию анимации, а не сразу.