提问人：Silambarasu 提问时间：11/8/2023 更新时间：11/8/2023 访问量：12
悬停后如何过渡，悬停时使用动画
How to transition after hovering off in which animation is used in hovering
问：
我正在悬停时在 div 内的 X 轴上对 0 到 100px 的文本进行动画处理。问题是当我将鼠标悬停在div上时，动画会很快恢复。我需要过渡效果才能看起来不错。请帮帮我。谢谢
我尝试在 div 的正常状态和 div 的悬停状态上应用过渡，但没有任何效果
答：
0赞
Dean Van Greunen
11/8/2023
#1
您可以仅在 css 中尝试此操作，但建议使用 javascript，因为当页面完整时，它会完整动画然后关闭，然后在悬停时正常工作，我确实强制宽度以 10px 开始和结束，否则您不能悬停在它上面。
div.parent {
display: block;
width: 100%;
height: 64px;
}
div.child {
height: 64px;
width: 10px;
background: red;
animation-name: htz; /* Default animation for non-hover state */
animation-duration: 1s;
animation-direction: normal;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div.child:hover {
animation-name: zth; /* Override animation for hover state */
}
@keyframes zth {
from {
width: 10px;
}
to {
width: 100%;
}
}
@keyframes htz {
from {
width: 100%;
}
to {
width: 10px;
}
}<div class="parent">
<div class="child">
</div>
</div>
评论