纯CSS按钮渐显需同时设置opacity:0和visibility:hidden，并用transition显式声明二者；应等关键字体加载完成再触发动画，避免布局偏移；优先使用transition而非@keyframes以支持状态响应与双向动画；懒加载场景推荐IntersectionObserver延迟触发。
按钮渐显效果不需要 JS 驱动，用纯 CSS 的 opacity + transition 就能稳稳实现；但直接在 DOMContentLoaded 时统一加类，容易和字体加载、布局重排冲突，导致按钮“闪一下再动”或“位置跳变”。
按钮初始状态必须设 opacity: 0 和 visibility: hidden
只设 opacity: 0 不够：元素仍占文档流、可被聚焦、影响 tab 键顺序；只设 visibility: hidden 则过渡无效（visibility 没有中间态）。二者必须同时用：
-
opacity: 0控制视觉透明度 -
visibility: hidden移除交互与布局占位 -
transition: opacity 0.4s ease, visibility 0.4s显式声明两个属性，不能写transition: all
触发动画的时机比动画本身更重要
常见错误是等 DOMContentLoaded 就批量加 show 类——此时 Web Font 可能还没下载完，按钮文字宽度突变，造成 layout shift，动画看起来像“抖了一下”。更稳妥的做法：
- 用
document.fonts.load('1em "Inter"')等关键字体就绪后再触发（需 fallback 到setTimeout防止超时） - 对按钮加
font-display: optional，让浏览器跳过阻塞渲染的字体等待 - 若按钮依赖外部资源（如图标字体、SVG sprite），应在资源加载完成后再加类
避免用 @keyframes 做简单渐显
为按钮写 @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } 再配 animation: fade-in 0.4s forwards 看似简洁，但有硬伤：
立即学习“前端免费学习笔记（深入）”；
-
animation-fill-mode: forwards会锁定终态，但按钮后续可能被 JS 动态修改样式（比如 hover、disabled），终态样式可能被覆盖或冲突 - 无法响应状态变化：按钮禁用时你没法用 CSS 覆盖掉这个动画的终态 opacity
- 动画不可逆：想做“点击后淡出”，
@keyframes方案就得另写一套，而transition天然支持双向
真实项目中建议搭配 IntersectionObserver 懒触发
如果按钮不在首屏（比如页脚 CTA 或模态框内按钮），没必要一上来就动画。用观察器延迟触发更合理：
- 设置
rootMargin: '100px'，让按钮进入视口前 100px 就开始准备 - 回调里只加
show类，不操作style—— 把控制权留给 CSS - 观察器实例记得在首次触发后
unobserve()，避免持续监听开销
最易被忽略的点：按钮容器如果有 overflow: hidden 或 transform，可能裁剪掉过渡过程中的半透明边缘；测试时务必在真机 Safari 和旧版 Edge 下检查是否闪烁或卡顿。
