我有一个动画，我已经把它应用到了一个html元素上，效果很好，但当我在悬停时把同一个动画应用到另一个元素(img(上时，它一直在闪烁。
我的CSS
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.logo-box:hover {
animation: moveInRight 1s ease-in;
}
@keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
80% {
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.logo-box对于.header类是绝对的
我的HTML正文
<body>
<header class="header">
<div class="logo-box">
<img class="logo" src="img/logo-white.png" alt="logo" />
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happends</span>
</h1>
</div>
</header>
</body>
有人能帮我解决这个问题吗。。。
为动画的开始添加延迟。
.logo-box:hover {
animation: moveInRight 1s ease-in 0.5s;
/*the 0.5s is the delay*/
}
如果你想知道发生了什么，请解释：
这是一个众所周知的问题，实际上与用户体验有关。闪烁的问题是因为不透明。一旦发生:hover(事件触发(，不透明度将变为零。现在，当您将指针指向图像时，由于指针的微小移动，会触发多个hover事件。一个悬停事件结束，第二个事件被触发。一旦hover结束并且opacity到达100%并且第二个hover事件使其立即到达0，即flicker，CSS就停止动画。如果添加一些延迟，则鼠标将稳定，然后播放动画。
然而，一旦触发hover，CSS就没有提供任何方法来完成动画，即无论指针是否不再在元素上，动画都必须完成。