css-transition

Overview

CSS transition 属性允许你为元素的样式变化添加过渡效果，使变化更平滑。

常用属性

属性	说明	示例值
transition-property	指定要过渡的CSS属性	all, width, color, transform
transition-duration	过渡动画持续时间	1s, 500ms, 0.3s
transition-timing-function	过渡的速度曲线	ease, linear, ease-in, ease-out, cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-delay	过渡开始前的延迟时间	0s, 200ms, 1s

简写语法

transition: property duration timing-function delay;

Transition vs Animation

特性	transition	animation
触发方式	需要状态变化（:hover, class 切换）	自动播放或通过 class 触发
关键帧	只有起始和结束	支持多个中间关键帧
循环	不支持	支持 iteration-count: infinite
精细控制	有限	animation-play-state, direction, fill-mode

/* transition：状态变化触发 */
.btn { background: blue; transition: background 0.3s; }
.btn:hover { background: red; }

/* animation：关键帧驱动 */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.btn { animation: pulse 2s ease infinite; }

性能考量

GPU 加速属性（推荐用于动画）

仅触发合成 (composite)，不触发重排和重绘：

• transform
• opacity

/* 好：只触发合成 */
.card { transition: transform 0.3s, opacity 0.3s; }
.card:hover { transform: translateY(-4px); opacity: 0.9; }

布局触发属性（避免用于动画）

触发重排 (reflow)，性能开销大：

• width, height, top, left, margin, padding

/* 差：触发重排 */
.box { transition: width 0.3s; }
.box:hover { width: 200px; }

/* 好：用 transform 代替 */
.box { transition: transform 0.3s; }
.box:hover { transform: scaleX(1.5); }

will-change 交互

/* 提示浏览器提前优化，创建独立合成层 */
.animated-element {
  will-change: transform, opacity;
  transition: transform 0.3s, opacity 0.3s;
}

• 不要滥用 will-change，每个声明都会消耗 GPU 内存
• 动画结束后应移除：通过 JS 动态添加/移除，或用 auto 值

cubic-bezier 自定义速度曲线

/* 内置关键词 */
transition-timing-function: ease;       /* 默认，慢-快-慢 */
transition-timing-function: linear;     /* 匀速 */
transition-timing-function: ease-in;    /* 慢启动 */
transition-timing-function: ease-out;   /* 慢结束 */

/* 自定义贝塞尔曲线 */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* 弹性效果：先超出再回弹 */

常用自定义曲线：

• 弹性回弹: cubic-bezier(0.68, -0.55, 0.265, 1.55)
• 快速进入: cubic-bezier(0.55, 0.085, 0.68, 0.53)
• 平滑减速: cubic-bezier(0.25, 0.46, 0.45, 0.94)

Related notes

• CSS Transform
• CSS Animation
• CSS MOC