如何实现鼠标离开div元素时的CSS fadeout淡出动画？

淡出动画不生效是因为你用display: none控制伪元素隐藏：该属性会直接把元素从渲染树移除，鼠标移出的瞬间伪元素就被立刻销毁，根本没有时间执行你定义的1秒淡出动画。
另外你把position: absolute、边距这类布局属性写在了:hover状态下，非hover状态伪元素是静态定位，显隐切换时会引发布局跳动，这类固定属性应该写在伪元素的默认样式里。

不要用display切换显隐，改用opacity + visibility组合：

• opacity控制透明度，天然支持动画过渡
• visibility: hidden可以让元素不可见、不响应鼠标交互，不会出现opacity:0时元素透明但仍然占位、遮挡其他元素的问题

方案1：保留animation写法的修正代码 #

<div>abcd: </div>

div::after {
    content: "The Breast Pocket was once used mostly to hold handkerchiefs, but generally has moved on to the functionality to hold pocket squares. Pocket squares are our primary accessory to add and show off a great tie.";
    /* 布局属性统一放在默认样式，避免跳动 */
    position: absolute;
    margin-right: 26px;
    margin-left: 10px;
    background:  rgba(23,23,90,0.8);
    color: white;
    padding: 15px;
    border: 1px solid grey;
    border-radius: 10px;
    /* 默认隐藏状态 */
    opacity: 0;
    visibility: hidden;
    animation: out 1s forwards;
}

div:hover::after {
    animation: in 1s forwards;
}

@keyframes in {
    0% { opacity: 0; visibility: hidden; }
    100% { opacity: 1; visibility: visible; }
}

@keyframes out {
    from { opacity: 1; visibility: visible; }
    to { opacity: 0; visibility: hidden; }
}

动画需要加forwards填充模式，保证动画结束后元素保持最后一帧的样式，不会出现状态回弹。

方案2：更简洁的transition写法 #

如果不需要复杂的关键帧控制，用CSS过渡实现双向淡入淡出代码更精简，不需要单独写两套动画关键帧：

div::after {
    content: "The Breast Pocket was once used mostly to hold handkerchiefs, but generally has moved on to the functionality to hold pocket squares. Pocket squares are our primary accessory to add and show off a great tie.";
    position: absolute;
    margin-right: 26px;
    margin-left: 10px;
    background:  rgba(23,23,90,0.8);
    color: white;
    padding: 15px;
    border: 1px solid grey;
    border-radius: 10px;
    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    /* 过渡属性注意visibility写在opacity后，保证淡出动画完成后再真正隐藏元素 */
    transition: opacity 1s, visibility 1s;
}

div:hover::after {
    opacity: 1;
    visibility: visible;
}

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