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

从动画状态转换CSS

1 个答案: