如何用CSS Transition实现元素快速显示、缓慢隐藏效果？

这个需求其实很容易解决，核心思路就是给显示（hover状态）和隐藏（默认状态）分别设置不同的过渡时长与曲线——你之前的代码只给元素统一设置了一套过渡规则，所以显示和隐藏的速度完全一致，不符合需求。

调整后的CSS代码 #

.mySpan {
  opacity: 0;
  font-size: 12px;
  background: red;
  border-radius: 5px;
  color: #fff;
  /* 隐藏时用慢过渡，这里设为1秒，搭配平缓的贝塞尔曲线让动画更自然 */
  transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 1s;
}

.mySpan:hover {
  opacity: 1;
  /* 显示时用快过渡，比如0.1秒，用陡峭的曲线让显示更干脆利落 */
  transition: opacity cubic-bezier(0, 0.52, 1, 1) 0.1s;
}

原理说明 #

• 当鼠标悬停时，触发.mySpan:hover的样式，此时会使用hover块内定义的快速过渡规则，让opacity从0→1在0.1秒内完成，实现快速显示的效果。
• 当鼠标移开时，元素回到默认的.mySpan样式，此时会使用默认状态下的慢速过渡规则，让opacity从1→0在1秒内完成，实现缓慢隐藏的效果。

你可以根据自己的偏好调整过渡时长（比如把隐藏的1秒改成0.8秒）和贝塞尔曲线参数，来达到最符合预期的动画质感。另外要注意，opacity: 0的元素依然会占据页面空间，所以hover事件可以正常触发，不需要额外处理交互区域的问题～

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