clip-path 是实现 PPT 风百叶窗切换最可控的纯 CSS 方案，通过 inset() 或 polygon() 动态裁剪内容区域，避免 background 平移或 transform 缩放的兼容性与性能问题。
用 clip-path 实现百叶窗条纹切换，不是靠 background 或 transform
纯 CSS 做 PPT 风百叶窗（即多条竖直/水平条纹依次展开遮盖），clip-path 是目前最可控、最接近 PowerPoint 行为的方案。它不依赖元素位移或背景滚动，而是直接裁剪内容区域，动画过程干净、无重绘抖动。
常见错误是试图用 background-position + background-size 模拟条纹扫过——这本质是纹理平移，无法真正“切换”两个不同 DOM 内容；也有人用多个 transform: scaleX(0) 的 div 并排过渡，但响应式下条纹数量难对齐，且 Safari 对大量 scale 动画有性能掉帧。
- 推荐用 SVG
<clipPath>配合 CSSanimation控制每条遮罩的inset()或polygon()路径 - 竖向百叶窗：用
clip-path: inset(0 <right> 0 <left>)，通过改变左右偏移制造“缝隙滑入”效果 - 横向则交换 top/bottom 和 left/right 逻辑，注意 y 轴方向与 CSS 坐标系一致
- 条纹数量建议固定为 5–9 条（太少像幕布，太多动画卡顿），用 CSS 自定义属性控制，避免硬编码
clip-path 百叶窗在 Safari 和旧版 Chrome 的兼容性坑
Chrome 107+、Firefox 110+、Edge 116+ 原生支持 clip-path 动画，但 Safari 直到 16.4 才支持 inset() 动画（之前只认静态值）；更早的 Chrome（
如果你必须支持 Safari 15.x 或 Chrome 98，得降级：用 @keyframes + 多个绝对定位子容器，每个子容器宽高设为 100%/n（n=条纹数），再逐个 opacity + transform: translateX() 触发 GPU 加速。虽然代码量翻倍，但稳定。
立即学习“前端免费学习笔记（深入）”；
- 检查是否启用硬件加速：
transform: translateZ(0)加在父容器上，避免 Safari 回退到软件渲染 - 禁用
will-change: clip-path—— 它在 Safari 中反而引发闪烁，Chrome 也不需要 - 不要用
clip-path: url(#svg-clip)动画，SVG 引用路径动画在 iOS Safari 上完全不触发
如何让两张图/两段文字真正“切换”，而不是只动遮罩
百叶窗动画的核心是「内容切换」，不是「遮罩动」。很多人只做了遮罩入场，忘了把新内容提前准备好并正确叠放。
典型结构是一个 <div class="slide-wrapper"> 包住两张图（或两个 <section>），新内容默认 visibility: hidden 或 opacity: 0，旧内容在动画开始前就设为 z-index: 1，新内容设为 z-index: 2，并在动画中段（比如 50% 关键帧）切换 visibility 或 opacity。
- 绝对定位两张内容，尺寸均为
100% 100%，父容器overflow: hidden - 动画全程保持新内容
opacity: 1，仅靠clip-path显隐，避免 opacity 过渡造成半透明重叠 - 如果内容含文字，确保字体加载完成后再触发动画，否则 Safari 下会出现文字重绘错位
- 不要用
display: none控制新内容显隐——它会中断动画流程，导致第一条纹闪一下才开始
用 JavaScript 控制百叶窗节奏：何时该交由 JS，何时坚持纯 CSS
纯 CSS 可以搞定匀速百叶窗，但 PPT 风强调“停顿感”：比如第 3 条停 0.1s，第 7 条慢进快出。这种非线性节奏，CSS animation-timing-function 很难精准表达，此时 JS 更可靠。
做法是用 requestAnimationFrame 逐帧更新每条 clip-path 的 inset() 值，配合一个数组描述每条的延迟和持续时间。比起 CSS keyframes，JS 方案可动态调整条纹数、响应窗口 resize、甚至绑定键盘翻页事件。
- 用
getComputedStyle(el).clipPath读取当前值不可靠，改用自定义属性存储状态，如el.style.setProperty('--stripe-3-progress', '0.7') - 避免在
scroll事件里直接调用动画函数，加节流或用IntersectionObserver替代 - 移动端慎用 touchmove 触发百叶窗——手指滑动速度远高于动画帧率，容易出现条纹撕裂
真正麻烦的是混合场景：比如某一页要同时支持自动播放、手动点击、以及从 URL hash 恢复位置。这时候 clip-path 只管视觉，状态管理必须交给 JS，CSS 只做“渲染层”。别指望一个 animation 规则包打天下。
