css transition与transform结合实现位移动画-css教程-PHP中文网

css transition与transform结合实现位移动画

P粉602998670

发布： 2025-09-17 15:50:01

原创

874人浏览过

使用CSS transition与transform结合可实现高效位移动画。通过transition定义过渡时间与缓动函数，transform执行translateX、translate等位移操作，避免重排并启用硬件加速。例如.box:hover时应用transform: translateX(100px)，实现0.3秒平滑右移。支持多方向位移如translate(50px, 50px)及组合动画如translateX(100px) rotate(45deg)，所有变换需在同一transform属性中以空格分隔。关键点包括：明确初始与目标状态的transform值，避免从none引发跳变；推荐初始设为transform: translateX(0)占位以确保动画稳定流畅。

css transition与transform结合实现位移动画

使用 CSS 的 transition 与 transform 结合，可以轻松实现流畅的位移动画效果。这种方式性能好，因为 transform 属于合成属性，浏览器会将其提升到图层中进行硬件加速。

基本原理

transition 定义属性变化时的过渡效果，比如持续时间、缓动函数；transform 用于对元素进行位移、旋转、缩放等操作。将两者结合，可以让元素在状态改变时（如 hover）平滑地移动位置。

实现横向或纵向位移

以下是一个鼠标悬停时向右平移 100px 的例子：

.box {
  width: 100px;
  height: 100px;
  background: #3498db;
  margin: 50px;
<p>/<em> 添加 transition 过渡 </em>/
transition: transform 0.3s ease;
}</p><p>/<em> 鼠标悬停时使用 translate 实现位移 </em>/
.box:hover {
transform: translateX(100px);
}</p>

登录后复制

这里，translateX(100px) 表示在 X 轴方向移动 100px，transition 让这个移动过程持续 0.3 秒，并以 ease 效果播放。

立即学习“前端免费学习笔记（深入）”；

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

多方向位移与组合动画

你可以同时在 X 和 Y 轴上移动元素，例如斜向移动：

.box:hover {
  transform: translate(50px, 50px);
}

登录后复制

也可以结合其他 transform 操作，比如先位移再旋转：

.box:hover {
  transform: translateX(100px) rotate(45deg);
}
</font><p>注意：所有 transform 操作都写在同一个 transform 属性中，用空格分隔。</p><H3>关键细节提示</H3><ul><li>确保初始状态和目标状态的 transform 值明确，避免从 <pre class="brush:php;toolbar:false;">none

登录后复制

到具体值时动画不生效或跳变。

使用