:target本身不触发动画，但可作为状态开关配合opacity和visibility实现淡入效果；因display是离散属性无法插值，故不能对其transition，须用opacity+visibility组合并写在基础选择器中。
:target 本身不触发动画，但能作为状态开关，配合 opacity 和 visibility 实现淡入效果。关键不是“用 :target 做动画”，而是用它切换一个可被 transition 响应的属性值。
为什么不能对 display 做 transition？
display 是离散属性，浏览器无法插值计算 display: none → display: block 的中间状态，所以加 transition: display 0.3s 完全无效。一旦 :target 匹配，元素会瞬间显示，毫无过渡。
- 必须改用
opacity（0→1）和visibility（hidden→visible）组合 -
visibility控制是否响应交互、是否可聚焦；opacity控制视觉渐变 - 两者都支持
transition，且不会触发回流，性能比display更稳
淡入动画的最小可行 CSS 写法
基础结构要同时覆盖「默认隐藏」和「:target 显隐」两个状态，缺一不可：
/* 弹窗容器必须有唯一 id，例如 #modal */
#modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
opacity: 0;
transition: opacity 0.25s ease, visibility 0.25s;
z-index: 1000;
}
#modal:target {
visibility: visible;
opacity: 1;
}
-
position: fixed是硬性要求，否则:target滚动会把页面顶到顶部 -
visibility: hidden必须写在基础选择器里，不能只靠:target反向控制 -
transition写在基础规则而非:target中，确保进入和退出都生效
常见失效原因与排查点
写了样式却没淡入？大概率卡在这几个地方：
- 链接 href 缺少
#，比如写成<a href="modal"></a>而非<a href="#modal"></a> - 目标元素 id 和 href 值大小写/空格/特殊字符不一致，如
id="MyModal"对应href="#mymodal"就不匹配 - CSS 优先级被更高权重的规则覆盖，比如某个父类写了
#modal { opacity: 1 !important; }，直接压过:target - 移动端 Safari 在后台切回时可能延迟应用
:target，可加scroll-margin-top: 20px防遮挡，但不解决动画延迟
真正容易被忽略的是：淡入动画依赖浏览器对哈希变更的即时响应，而 SPA 中若仅用 history.pushState() 不触发真实导航，:target 就不会更新——这时得退回到 window.location.hash = "#modal" 或补 location.replace() 才行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
