如何在CSS中设置不同的fade in淡入与fade out淡出时长

你只需要给元素的默认状态和hover状态分别配置不同的transition规则即可，两个状态的过渡规则互相独立，刚好可以分别控制淡入、淡出的延迟和时长。 #

完整代码示例 #

HTML结构 #

<header class="site-header">
  导航栏内容
</header>

CSS代码 #

/* 默认状态：对应鼠标移出后的淡出逻辑 */
.site-header {
  opacity: 0;
  /* 隐藏时阻断鼠标事件，避免空白区域误触发hover */
  pointer-events: none;
  /* 规则：transition: 过渡属性 过渡时长 缓动曲线 触发延迟 */
  /* 这里的2.5s就是鼠标移出后停留的时间，0.3s是淡出动画时长 */
  transition: opacity 0.3s ease 2.5s;
}

/*  hover状态：对应鼠标悬浮后的淡入逻辑 */
.site-header:hover {
  opacity: 1;
  pointer-events: auto;
  /* 这里的200ms是悬浮后等待淡入的延迟，0.3s是淡入动画时长 */
  transition: opacity 0.3s ease 200ms;
}

自定义参数调整 #

• 调整淡入延迟：修改hover状态transition的第四个参数，单位支持s（秒）和ms（毫秒），比如要延迟500ms就改为500ms
• 调整淡入速度：修改hover状态transition的第二个参数，数值越大淡入越慢
• 调整移出后停留时长：修改默认状态transition的第四个参数，按需设置为2~3s即可
• 调整淡出速度：修改默认状态transition的第二个参数，数值越小淡出越快

如果你的Header默认是显示状态，仅需要hover时切换其他样式（比如背景色、高度等），把opacity相关配置替换为对应属性即可，逻辑完全一致。

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