如何通过CSS的transform:translateX实现网页元素的滑动进入效果？

本文共计979个文字，预计阅读时间需要4分钟。

直接修改+left或+margin-left的，触发的是+layout+paint+的过程，动画卡顿明显；而+transform:translateX只走合成层（compositor）+GPU+加速，60fps更稳。尤其在低端手机或长列表里，差异肉眼可见。

常见错误是给元素设了 position: relative 后用 left: -100% 做初始态，再用 left: 0 动画——这等于放弃硬件加速。

• 初始状态统一用 transform: translateX(-100%)，目标状态用 transform: translateX(0)
• 必须搭配 transition: transform 0.3s ease-out（不能只写 transition: all）
• 如果父容器有 overflow: hidden，确保子元素 translate 不会意外裁切——有时 -100% 是相对父宽，有时是相对自身宽，得看 transform-origin 和布局上下文

如何让划入只触发一次，而不是滚动来回反复动

靠 CSS 自身无法判断“是否已进入视口”，必须结合 JS 监听滚动。但别用 scroll 频繁触发，容易掉帧。