如何解决CSS：hover @keyframes动画使图像闪烁
我有一个动画，并且已经将它很好地应用于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);
}
}
我的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*/
}
如果您想知道发生了什么，请说明：
这是一个与UX相关的众所周知的问题。闪烁问题是由于不透明。一旦:hover发生（事件触发），不透明度变为零。现在，当您将指针指向图像时，由于指针的微动，将触发多个hover事件。一个悬停事件结束，第二个悬停事件被触发。 hover结束并且opacity到达100%时，CSS停止动画处理，第二个hover事件导致它立即转到0，这是flicker。如果添加一些延迟，则鼠标将变得稳定，然后将播放动画。
但是，一旦hover被触发，CSS就无法提供任何完成动画的方法，也就是说，无论指针是否不再位于元素上，动画都必须完成。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
