如何实现文本从左到右出现并从左到右消失的CSS悬停动画？

要实现鼠标移出时文本从左到右消失，同时重置状态以便再次触发左到右显示的效果，我们可以通过分离显示/隐藏的CSS动画流程来实现，避免过渡动画的反向执行。

核心思路 #

• 放弃单纯的transition，改用@keyframes分别定义显示和隐藏的动画逻辑
• 显示动画保持原逻辑：通过max-width从0到100%实现左到右展开
• 隐藏动画分两步：先让文本向左移出容器（实现左到右消失），最后重置状态确保下次hover能正常触发显示

完整代码 #

.container {
    padding: 10px 0;
    width: fit-content;
    overflow: hidden; /* 裁剪移出容器的文本 */
}

.text {
    overflow: hidden;
    white-space: nowrap;
    max-width: 0; /* 初始隐藏状态 */
}

/* 鼠标悬停：左到右显示文本 */
.container:hover .text {
    animation: slideIn 700ms linear forwards;
}

/* 鼠标移出：左到右隐藏文本并重置状态 */
.container:not(:hover) .text {
    animation: slideOut 700ms linear forwards;
}

@keyframes slideIn {
    0% {
        max-width: 0;
        text-indent: 0;
    }
    100% {
        max-width: 100%;
        text-indent: 0;
    }
}

@keyframes slideOut {
    0% {
        max-width: 100%;
        text-indent: 0;
    }
    99% {
        max-width: 100%;
        text-indent: -100%; /* 文本向左移出容器，实现左到右消失 */
    }
    100% {
        max-width: 0;
        text-indent: 0; /* 重置状态，为下次显示做准备 */
    }
}

<div class="container">
  <div class="text">THIS IS MY TEXT</div>
</div>

关键细节说明 #

• container添加overflow:hidden：确保文本移出容器时被裁剪，避免出现滚动条或溢出内容
• slideOut动画的99%帧：保持max-width:100%，只修改text-indent，让文本整体左移，视觉上呈现从左到右消失的效果
• slideOut动画的100%帧：重置max-width和text-indent到初始状态，确保下次hover时slideIn动画能从头执行

内容的提问来源于stack exchange，提问作者Bidou