content-visibility: auto 会跳过离屏元素的 layout 和 paint，导致动画无法触发；需用 intersectionobserver 监听视口并动态添加动画 class，配合 @supports 降级兼容。
content-visibility: auto 本身不优化动画，反而可能让动画“消失”或错位——它跳过离屏元素的 layout 和 paint，而动画依赖这两步。想在长列表里跑动画，得先保住渲染通路。
为什么加了 content-visibility: auto 动画就没了
浏览器对设了 content-visibility: auto 的元素，在离屏时直接跳过 layout 和 paint 阶段。哪怕你写了 @keyframes 或 transition，只要元素没进视口，CSS 动画引擎根本收不到渲染帧触发信号。
- 常见现象：滚动到底部才看到卡片突然“闪现”，扫光动画、淡入、缩放全没执行
- 不是 bug，是设计使然：
auto的语义就是“没到我出场的时候，别动我” -
will-change: transform对它无效——没 layout 就没 transform 基准，浏览器直接忽略
contain-intrinsic-size 不解决动画问题，但能防滚动错乱
这个属性只管占位高度，和动画无关。但它必须设对，否则滚动条抽搐会让动画更难调试。
- 固定高卡片（如 120px）：写
contain-intrinsic-size: 120px - 含图片+多行文字的项：保守写
contain-intrinsic-size: 160px，宁大勿小 - 严禁用
0、auto、100%—— 这等于没设，滚动条会猛缩 - Flex/Grid 容器中，必须额外加
align-items: flex-start或在子项上单独设contain-intrinsic-size，否则未渲染项高度为 0，导致父容器塌陷、动画起始位置漂移
真正在长列表里跑动画的可行做法
核心思路：动画只在可见区域启用，离屏区域不参与；靠 JS 触发 + CSS class 切换，绕过 content-visibility 的自动拦截。
- 给列表项加 class 如
.card--animate，动画规则只写在这个 class 下 - 用 IntersectionObserver 监听进入视口：一旦
isIntersecting === true，立刻element.classList.add('card--animate') - 退出视口时可选择保留动画状态（避免反复重播），或
remove()后等下次进再加 - 避免对每个项都开 Observer 实例——统一用一个 Observer 实例监听全部
.card，性能更可控 - 慎用
animation-play-state: paused/running切换：部分安卓浏览器对离屏元素的 play-state 支持不稳定，class 切换更可靠
兼容性与降级必须做，否则动画在 Safari ≤ 16.4 里彻底失效
Firefox for Android、iOS Safari ≤ 16.4、所有 IE 版本完全不支持 content-visibility。强行使用且无 @supports 包裹，会导致动画规则被整个忽略，或者因 fallback 缺失而布局崩坏。
- 必须用
@supports (content-visibility: auto)包裹优化样式，里面写动画逻辑 - 不支持环境的降级方案：用
opacity: 0.99替代content-visibility: auto（保留占位+无障碍），动画照常跑 - 千万别在
@supports外写动画规则——否则不支持浏览器会把动画和content-visibility一起丢弃
真正难的不是让动画动起来，而是让动画只在该动的时候动、在不该动的时候安静待命，同时不破坏滚动体验。这需要把 content-visibility 当成“渲染开关”，把 IntersectionObserver 当成“启动按钮”，两者配合，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
