CSS实现元素初始不可见且保留hover淡入淡出过渡的问题

问题的核心原因是你没给元素设置初始透明状态，或者过渡属性仅在hover时生效，导致页面加载时浏览器先渲染默认的不透明元素，再应用透明样式，出现闪显情况。

直接用下面的代码就能解决问题，完美匹配你的需求：

HTML结构 #

<div class="project">
  <h3>你的项目标题</h3>
</div>

CSS代码 #

/* 给目标元素设置初始状态和过渡规则 */
.project h3 {
  opacity: 0; /* 页面加载时直接不可见 */
  transition: opacity 0.3s ease; /* 对opacity的所有变化应用过渡动画 */
}

/* hover时触发淡入 */
.project:hover h3 {
  opacity: 1;
}

关键说明 #

• 必须把transition属性写在元素的默认样式里，而非hover伪类中：这样不管是从透明到不透明（hover），还是从不透明到透明（移出），都会触发过渡动画。
• 初始就设置opacity: 0：浏览器加载时直接渲染透明状态，不会出现先显示再消失的闪屏问题。
• 不要用display: none实现初始隐藏：display属性不支持过渡动画，会导致移出时没有淡出效果，opacity是实现这种淡入淡出的最佳选择。

内容的提问来源于stack exchange，提问作者Anonymous Nyan Cat