用@keyframes+visibility无法实现渐显，因为visibility只有visible/hidden两个离散值，不支持插值动画；正确做法是opacity+pointer-events+transform组合，确保视觉、交互与布局协同。
用 @keyframes + visibility 做渐显，为什么行不通？
直接用 visibility 配合 @keyframes 无法实现“渐显”效果，因为 visibility 只有 visible 和 hidden 两个离散值，不支持中间状态，CSS 动画无法对其插值。你写成这样：
@keyframes fade-in {
from { visibility: hidden; opacity: 0; }
to { visibility: visible; opacity: 1; }
}
动画会“闪一下”——opacity 平滑过渡了，但 visibility 在起始帧就生效，导致元素在动画开始前就占位（或不占位），破坏视觉连贯性。
真正可靠的渐显组合：opacity + pointer-events + 可选 transform
要兼顾视觉渐变、交互响应和布局稳定性，推荐这组配合：
-
opacity控制透明度过渡（必须，支持动画插值） -
pointer-events: none在隐藏态禁用交互，避免误点（比visibility: hidden更安全） -
transform: scale(0.95)或translateY(10px)加一点入场动效，提升感知质量（非必需但推荐） - 动画结束时补上
pointer-events: auto，否则元素可见却不可点
示例关键帧：
立即学习“前端免费学习笔记（深入）”；
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px) scale(0.98);
pointer-events: none;
}
to {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
}
动态加载时触发动画的两种常用时机
元素是 JS 动态插入的（比如 AJAX 返回后 appendChild），动画不能靠 CSS 自动触发，需手动加 class：
- 插入 DOM 后立即加动画 class：
el.classList.add('fade-in')，再用setTimeout(() => el.classList.remove('fade-in'), 300)清理（避免 class 泄露） - 更稳妥的做法是用
el.offsetHeight强制重排，再加 class，确保浏览器已识别新元素尺寸 - 如果用
IntersectionObserver实现懒加载渐显，回调里加 class 即可，无需额外 hack
对应 CSS：
.fade-in {
animation: fade-in-up 0.3s ease-out forwards;
}
容易被忽略的细节：动画完成后的 visibility 状态
即使用了 opacity: 1，如果后续 JS 或其他样式又把 visibility 设为 hidden，元素会突然消失——因为 opacity 不影响渲染树，而 visibility: hidden 仍会保留占位。所以：
- 不要混用
visibility和opacity控制显隐逻辑，保持单一信源（推荐只用opacity+pointer-events） - 若必须用
visibility（例如为了 SEO 或无障碍），应在动画结束后用 JS 显式设置el.style.visibility = 'visible'，覆盖动画中的临时声明 - 检查父容器是否设置了
overflow: hidden，缩放或位移动画可能被意外裁剪
渐显不是加个 @keyframes 就完事，关键在动画属性选择、JS 触发时机和后续状态管理三者咬合。漏掉任意一环，用户看到的都可能是卡顿、错位或点击失效。
