Как при изменении animation-duration убрать перемещение объекта в исходную позицию?

Question

[gazes12]

https://gazes12.github.io/help/
При наведение на иконку скорость анимации увеличивается с .2s на .4s. Проблема в том, что иконка при наведение возвращается в rotate: 0 deg; Как исправить проблему?

<header class="header">
        <div class="header__container">
            <a href="/" class="header__logo logo-header">
                <img src="img/Logo/icon.svg" alt="Логотип" class="logo-header__icon">
                <img src="img/Logo/icon-text.svg" alt="Логотип" class="logo-header__text">
            </a> 
        </div>
    </header>

/*Логотип*/
.logo-header__icon {
  width: 80px;
  animation: rotateIcon 4s infinite alternate;
}

.logo-header__icon:hover {
  animation-duration: 2s;
}

@keyframes rotateIcon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}