实现Hover状态进出双向平滑动画——解决Hover退出时动画戛然而止的问题

嘿，这个问题我之前也踩过坑！你现在的问题核心是用了display: none/block控制元素显隐，但display属性压根不支持CSS过渡/动画，所以退出hover时元素直接消失，完全没平滑效果。另外原代码里的动画只写了进入的关键帧，没处理退出逻辑，而且transition放在hover状态里，正常状态下没设置，也导致退出时没过渡基础。

给你调整一下代码，用支持过渡的属性实现双向平滑动画：

修改后的CSS代码 #

* { font-size: 50px; } 
.container {
  display: flex; /* 用flex替代float，布局更稳定可控 */
  align-items: center;
}
.container a{ 
    position:relative; 
    font-family: 'Montserrat', sans-serif; 
    font-weight:bold; 
    margin-left: 5%; 
    padding-right: 10px; 
} 
.child{ 
    position:relative; 
    padding-left: 0; /* 初始padding为0，对应动画起始状态 */
    font-weight:bold;
    opacity: 0; /* 初始完全透明 */
    border-left: 0 solid #F0C930; /* 初始边框宽度为0 */
    color: transparent; /* 初始文字透明，避免过渡前突兀显示 */
    transition: all 0.4s ease; /* 给所有可过渡属性加过渡，正常状态下设置才会生效双向动画 */
} 
.container:hover > .child{ 
    color:#F0C930; 
    border-left-width: 4px; /* hover时边框展开 */
    padding-left: 10px; /* hover时padding拉开 */
    opacity: 1; /* hover时完全显示 */
}

改动说明 #

• 替换float为flex布局：浮动布局容易出现排版问题，flex能让两个元素更稳定地横向排列且对齐
• 抛弃display: none：改用opacity、padding-left、border-left-width这些支持CSS过渡的属性实现元素的“隐藏”与“显示”，这样hover进入和退出时都能触发平滑过渡
• 把transition放在.child的正常状态：只有在默认状态下设置过渡，退出hover时才会从hover状态平滑过渡回默认状态
• 移除冗余的@keyframes：用transition就能实现所需的平滑效果，比关键帧动画更简洁易维护

这样调整后，你hover"Word"的时候，子元素会平滑展开；鼠标移开时，也会慢慢收起，完全不会戛然而止啦～

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