CSS-深度解析 Transition 过渡与 Transform 变换在前端开发中，让页面“动起来”有两种常见方式：一

前言

在前端开发中，让页面“动起来”有两种常见方式：一种是自动运行的 Animation，另一种则是响应用户交互的 Transition。而 Transform 则是实现这些动效的“物理引擎”。理解这两者，是打造丝滑交互体验的基础。

一、 Transition：让属性变化更平滑

Transition（过渡）的核心作用是：平滑地将 CSS 属性从一个状态变为另一个状态。

1. 核心语法（简写）

transition: property duration timing-function delay;

属性	含义	默认值
`transition-property`	指定要变化的 CSS 属性（如 `width`, `all`）	`all`
`transition-duration`	完成过渡所需时长（必须带单位 `s/ms`）	`0`
`transition-timing-function`	速度曲线（`ease`, `linear`, `cubic-bezier`）	`ease`
`transition-delay`	延迟触发时间	`0`

2. 使用场景与限制

场景：常配合 :hover、:focus 或通过 JS 切换类名来触发。
限制：
- 无法自动播放（需要诱因触发）。
- 只有两个状态（开始和结束），无法设置中间的关键帧（如需复杂效果请用 Animation）。

3. 实际使用

需求：鼠标悬停时，红色方块旋转45度

.card {
  width: 100px;
  height: 100px;
  background: #ff4757;
  /* 针对 width 和 transform 设置过渡 */
  transition: all 0.5s ease-in-out;
}
.card:hover {
  width: 150px;
}

二、 Transform：元素的几何形变

Transform 允许你对元素进行旋转、缩放、倾斜或移动。它最强大的地方在于：不脱离文档流，且由 GPU 加速，性能极高。

1. 四大核心变换

translate(x, y)（位移） ：x代表x轴正值向右，负值向左，y值代表y轴。
- 示例：transform: translate(120px, 50%);
- 特点：百分比是相对于元素自身的宽高，常用于未知宽高的元素水平垂直居中。
scale(x, y)（缩放） ：x代表水平缩放比例，y代表垂直方向缩放比例。
- 示例：transform: scale(2, 0.5);
- 特点：值 > 1 放大；0 ~ 1 缩小。负值不仅会缩放，还会产生镜像翻转效果。
rotate(deg)（旋转） ：
- 示例：transform: rotate(45deg);
- 参考点：默认中心旋转，可通过 transform-origin 修改。
skew(x, y)（倾斜/扭曲） ：x代表在x方向上的扭曲，y代表在y方向上的扭曲。
- 示例：transform: skew(30deg, 20deg);
- 场景：常用于制作卡片的斜切视觉效果。

2. transform-origin（变换原点）

它决定了元素旋转或缩放时的“锚点”。

默认值：50% 50%（正中心）。
可设为：left top、center 或具体像素值。

3、实战案例：丝滑的悬浮扩展

需求：鼠标悬停时，红色方块宽度增加，并顺时针旋转。

.card {
  width: 100px;
  height: 100px;
  background: #ff4757;
  /* 针对 width 和 transform 设置过渡 */
  transition: all 0.5s ease-in-out;
}

.card:hover {
  width: 150px;
  transform: rotate(45deg);
}

三、深度辨析与性能建议

为什么优先用 Transform 改变位置？
- 修改 top/left 会触发 重排（Reflow） 。
- 修改 transform 只会触发 合成（Composite） ，它由 GPU 直接渲染，不会影响其他元素的布局，更加丝滑。
不可过渡的属性：有些属性是无法平滑过渡的，例如 display: none 到 display: block。在这种场景下，通常配合 opacity（透明度）来实现视觉上的淡入淡出。

CSS-深度解析 Transition 过渡与 Transform 变换

前言