动画状态的 CSS 过渡

Question

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

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

    #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

Answer 1

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

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