从动画状态过渡的 CSS 过渡

Question

是否可以

强制具有影响不透明度的动画属性的元素在悬停时从其当前状态过渡到另一个预定状态？

null 状态对象在不同的不透明度之间进行动画处理：

    #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;
}

我已经能够实现直接跳转到不透明度：1;，但无法实现平滑过渡。

原型可以在Codepen上找到：

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

Answer 1

将过渡添加到#thumb样式，您目前仅将其应用于其悬停样式，因此您不会看到过渡

#thumb{
   transition: .23s ease-in-out;
}