Переход CSS из анимированного состояния

Можно ли заставить элемент со свойством анимации, влияющим на непрозрачность, переходить из текущего состояния в другое предопределенное состояние при наведении курсора?

Объект нулевого состояния анимируется между разными непрозрачностями:

    #thumb {
    opacity: .33;
    -webkit-animation: pulse 2.7s infinite ease-in-out;
    -o-animation: pulse 2.7s infinite ease-in-out;
    -ms-animation: pulse 2.7s infinite ease-in-out; 
    -moz-animation: pulse 2.7s infinite ease-in-out; 
    animation: pulse 2.7s infinite ease-in-out;
}

@-webkit-keyframes pulse {
    0% { opacity: 0.23; }
    50% { opacity: 0.42; }
    100% { opacity: 0.23; }
}

@keyframes pulse {
    0% { opacity: 0.23; }
    50% { opacity: .42; }
    100% { opacity: .23; }
}

И я бы хотел, чтобы это облегчило переход к другому изображению и прозрачности при наведении курсора:

#thumb:hover {
    opacity: 1;
    background-image: url(hover.png); 
    -webkit-animation: initial;
    -o-animation: initial;
    -ms-animation: initial; 
    -moz-animation: initial; 
    animation: initial;
    -webkit-transition: .23s ease-in-out;
    transition: .23s ease-in-out;
}

Мне удалось добиться прямого перехода к opacity: 1 ;, но не удалось добиться плавного перехода.

Его прототип можно найти здесь, на Codepen:

https://codepen.io/anon/pen/oqmMEV