Css 悬停效果在3秒内关闭，即使cusor在上面

我已经编写了以下CSS，并将其

元素置于
之后，以延迟悬停效果关闭

transition: .50s all;   
transition-delay: 3s;

现在，我希望悬停效果将在3之后关闭，即使光标位于元素上

在CSS中有什么方法可以做到这一点吗？
使用动画而不是过渡

@keyframes doMagic {
    0% {
       // initial styles
    }
    100% {
       // hover styles
    }
}

.selector {
   animatiom: doMagic 3s ease forwards;
   animation-delay: 3s; // not sure if u need it
}

使用关键字“转发”
可以告诉动画保持其完成状态

阅读更多关于

如果你不把它放进去。动画将播放到100%，然后进入初始状态
您可以使用关键帧动画，同时将迭代计数设置为1：

注意

将需要前缀

演示


div{
过渡：所有0.8秒；
高度：300px；
宽度：300px；
背景：番茄；
}
div:悬停{
-webkit动画：3s线性悬停；
-webkit动画迭代计数：1；
-moz动画：3s线性悬停；
-moz动画迭代次数：1；
动画：3s线性悬停；
动画迭代次数：1；
}
@-webkit关键帧悬停它{
0%{背景：番茄；}
10%{背景：蓝色；}
90%{背景：蓝色；}
100%{背景：番茄；}
}
@-moz关键帧将其悬停{
0%{背景：番茄；}
10%{背景：蓝色；}
90%{背景：蓝色；}
100%{背景：番茄；}
}
@关键帧悬停它{
0%{背景：番茄；}
10%{背景：蓝色；}
90%{背景：蓝色；}
100%{背景：番茄；}
}
你能再详细一点吗？“现在我希望悬停效果在3点后会关闭，即使光标在元素上。”这很难理解。你想让悬停效果在3秒后消失吗？我不确定。是的，你能提供更多的细节吗？一个你目前拥有的完整样本会有所帮助。请包括你希望css生效的html和实际的css规则。描述元素的样式应该告诉用户什么，以及您计划使用哪些特定的css属性。感谢@ajmajma的回复。实际上，如果我将光标从元素上移开，悬停效果会在3秒后接近。但我将光标停留在其中，然后它在3秒后不会关闭。你能在中重新创建一个关于该问题的最低限度示例吗？我同意OP可以通过在接近尾声时“还原”动画来获得他想要的效果。据我所知，他确实希望动画在最后回到初始状态。@Arif：很高兴我能帮上忙。如果有什么问题，给我一声喊叫：）我一定会揍你的。