transition不能直接实现文字渐显，必须配合opacity初始值为0和触发状态（如class切换或伪类）才能生效；纯静态HTML无动画能力，需CSS控制显示逻辑。
transition 本身不能直接作用于文字内容的“渐显”，必须配合 opacity 和触发状态（如 class 切换或伪类）才能生效。纯静态 HTML 不具备动画能力，必须引入 CSS 控制显示逻辑。
为什么直接写 <p>文字</p> 加 CSS 不会自动渐显
浏览器渲染时，<p> 默认 opacity: 1，没有初始隐藏状态，也没有触发时机。渐显需要两个前提：
- 元素初始为不可见（opacity: 0 + visibility: hidden 或 display: none）
- 后续通过 JS 添加 class 或利用 :hover/:focus 等伪类触发可见态变化
- transition 只负责描述“如何变”，不负责“何时变”
opacity + transition 的最小可行组合
以下是最简、语义清晰、无障碍友好的写法（无需 JS）：
<style>
.fade-in {
opacity: 0;
transition: opacity 0.4s ease-out;
}
.fade-in.loaded {
opacity: 1;
visibility: visible;
}
</style>
<p><p class="fade-in">这段文字将淡入</p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><script>
// 页面加载完成后添加 loaded 类（可选，也可用 IntersectionObserver 延迟触发动画）
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.fade-in').forEach(el => {
el.classList.add('loaded');
});
});
</script>-
visibility: visible必须和opacity: 1同时设置，否则屏幕阅读器可能提前读取内容但用户看不到 - 避免只用
display: none → block：它无法被transition捕获，会突显 -
ease-out比linear更自然，适合入场动画
常见踩坑点：移动端失效、闪屏、SEO 友好性
这些不是代码“错”，而是环境适配疏忽导致：
立即学习“前端免费学习笔记（深入）”；
- 未加
will-change: opacity：iOS Safari 旧版本（≤15.6）可能跳帧，建议在动画元素上加该声明 - 未处理首屏内容：搜索引擎爬虫和无 JS 环境下，
.loaded不会被添加 → 文字永远不显示。解决方法是默认不加.loaded，但服务端渲染时主动注入，或用@media (prefers-reduced-motion)降级为无动画 - 用
transform: translateY()混搭时未设transform-origin：可能导致文字模糊（尤其 Retina 屏），优先用opacity而非位移做基础渐显
真正关键的不是“怎么写第一行”，而是想清楚：这个渐显是给谁看的？是否影响首次内容渲染（FCP）？有没有更轻量的替代方案（比如仅用 opacity 配合延迟）？这些判断比抄一段代码更重要。
