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

Question

[WizardW]

'use strict'
;(function(){
    var links = document.getElementsByClassName('header-switcher__link');
    [].forEach.call(links, function(l) {
        if(!l.classList.contains('active-switcher')) {
            l.addEventListener('mouseenter', e => {
                l.style.animation = 'hover 0.45s ease-out';
            });               
            l.addEventListener('mouseleave', e => {
                l.style.animation = 'hover 0.45s ease-out';
            });
        }
    });
})();

@keyframes hover
  0%
    opacity: 1 
  50%
    opacity: 0.8
  100%
    opactity: 1

Навожу на элемент: opacity: 1 => opacity 0.8 и обратно в единицу
Убираю курсор с элемента - должно произойти то же самое, но opacity остается равным 1.

Answer 1

[WizardW]

Создал два разноименных, но одинаковых по функционалу кейфрейма.