如何在HTML页面中制作位置移动过渡效果-html教程-PHP中文网

应优先使用 transform: translate() 配合 transition 实现位移动画，避免 left/top 触发回流导致卡顿；transform 仅触发重绘或图层合成，性能更优，兼容 ie10+，且需在初始状态写 transition、目标状态改 transform 值。

如何在html页面中制作位置移动过渡效果

直接用 transform: translate() 配合 transition，别碰 left/top——后者触发布局重排，卡顿明显，尤其在移动端。

为什么不能用 left/top 做移动过渡

浏览器对 left、top 这类布局属性的修改，会强制触发「回流（reflow）」：重新计算元素位置、尺寸、文档流关系。哪怕只是 1px 的变化，也可能连带影响兄弟/父级元素，动画一卡一卡的。

transform 则不同，它只作用于合成层（compositing layer），GPU 可加速处理，只触发「重绘（repaint）」甚至更轻量的图层合成，60fps 更稳。

实测对比：同个 div 移动 200px，left: 200px 在低端安卓机上帧率常掉到 30–40fps；transform: translateX(200px) 能稳定 58–60fps
兼容性没问题：transform 和 transition 在 IE10+、所有现代浏览器均支持
注意：若元素本身没脱离文档流（比如是 static 定位），transform 不会影响其他元素布局——这是优点，不是 bug

transition + transform 的最小可用写法

关键就三行 CSS：transition 必须写在「初始状态」里，不是 hover 或 active 里；transform 改变值要写在「目标状态」中（如 :hover）。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

.move-box {
  width: 100px;
  height: 100px;
  background: #3498db;
  /* 这里声明过渡：只对 transform 生效，0.3 秒，ease-out 曲线 */
  transition: transform 0.3s ease-out;
}
.move-box:hover {
  /* 这里改变 transform 值，浏览器自动补间 */
  transform: translateX(120px) translateY(-20px);
}

transition 中省略 transition-timing-function 会默认用 ease，但 ease-out 更适合位移收尾——有“停住感”
别写 transition: all 0.3s：万一后续加了 color 或 font-size，它们也会被强行过渡，可能造成意外动画
如果要 Y 轴单独控制（比如只上下浮动），用 transform: translateY(-10px) 比 transform: translate(0, -10px) 更清晰

移动起点偏移：别忘设 transform-origin

默认 transform-origin 是 50% 50%（中心点），大多数情况够用。但如果你做的是「从左边缘滑入」「绕左上角旋转后平移」这类效果，起点不对，动画就会错位。

例如一个侧边菜单从屏幕外左滑进：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  transform: translateX(-280px); /* 初始藏在左边 */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 自定义快出慢入 */
}
.sidebar.open {
  transform: translateX(0);
}
/* 关键：让 transform 以左侧为基准，避免内容“漂” */
.sidebar {
  transform-origin: left center;
}

transform-origin 影响的是整个 transform 函数族（rotate、scale、skew 都受它约束），不单为 translate
值写成 left center 比 0 50% 更易读，语义明确
如果用了 scale 再加 translate，且没调 transform-origin，缩放中心和位移参考点不一致，容易出现“抖动”或偏移偏差