第八章 · 8.2 节

transition 过渡

当一个属性的值发生变化时（比如鼠标悬停触发的 :hover 状态切换），浏览器默认会瞬间跳变。transition 让这个变化过程"平滑化"，是入门成本最低、收益最直观的动效工具。

四个子属性

属性	作用	默认值
transition-property	指定哪些属性参与过渡	all
transition-duration	过渡时长	0s（不过渡）
transition-timing-function	缓动曲线	ease
transition-delay	延迟开始时间	0s

.btn {
  transition-property: background, transform;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
/* 简写形式，更常用 */
.btn { transition: background .2s ease-out, transform .2s ease-out; }

缓动函数

缓动函数描述"速度如何随时间变化"，选对曲线能让动效感觉更自然，而不是机械的匀速移动。

关键字	速度特征	适合场景
linear	匀速	加载进度条一类机械感场景
ease	先加速后减速（默认）	大多数通用场景
ease-out	快进慢出	元素进入视野、展开
ease-in	慢进快出	元素离开视野、收起
cubic-bezier(x1,y1,x2,y2)	自定义曲线	需要精细调校的品牌动效

悬停对比不同缓动（观察位移的加速/减速手感）

linear

ease-out

回弹曲线

哪些属性可以过渡

并非所有 CSS 属性都能过渡——只有取值可以被"插值计算"的属性才行，比如颜色、长度、透明度、transform 函数的参数。display 这类离散关键字属性无法平滑过渡（要么是 block 要么是 none，中间没有过渡态）。

常见需求：display 切换的过渡较新的浏览器支持把 display 与 content-visibility 加入 transition-property，配合 @starting-style 实现"从 none 淡入"的效果；在此之前，惯用做法是用 visibility + opacity 组合模拟。

多属性差异化过渡

用逗号分隔可以为不同属性设置不同的时长与延迟，让复合动效更有层次：

.dropdown {
  transition:
    opacity .15s ease,
    transform .2s ease-out .05s; /* 位移比透明度晚 50ms 开始 */
}

尊重减弱动效偏好

回顾 3.2 节的 prefers-reduced-motion——凡是引入了 transition/transform 的项目，都应该配套提供减弱版本：

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}

Chapter 8 · Section 8.2

transition

When a property's value changes (for example, a :hover state triggered by the mouse), the browser jumps to the new value instantly by default. transition smooths that change over time — it is the cheapest animation tool to learn and gives the most immediate payoff.

The Four Sub-properties

Property	Purpose	Default
transition-property	Specifies which properties participate in the transition	all
transition-duration	Transition duration	0s (no transition)
transition-timing-function	Easing curve	ease
transition-delay	Delay before the transition starts	0s

.btn {
  transition-property: background, transform;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
/* The shorthand form, more commonly used */
.btn { transition: background .2s ease-out, transform .2s ease-out; }

Easing Functions

Easing functions describe how speed changes over time; choosing the right curve makes the motion feel natural instead of mechanically uniform.

Keyword	Speed profile	Best for
linear	Constant speed	Mechanical scenarios like loading progress bars
ease	Accelerate then decelerate (default)	Most general-purpose scenarios
ease-out	Fast in, slow out	Elements entering the viewport, expanding
ease-in	Slow in, fast out	Elements leaving the viewport, collapsing
cubic-bezier(x1,y1,x2,y2)	Custom curve	Brand motion that needs fine tuning

Hover to compare different easing (feel the accelerate/decelerate of the movement)

linear

ease-out

spring curve

Which Properties Can Transition

Not every CSS property can transition — only properties whose values can be interpolated, such as colors, lengths, opacity, and the parameters of transform functions. Discrete keyword properties like display cannot transition smoothly (it is either block or none, with no intermediate state).

Common need: transitioning display togglesNewer browsers support putting display and content-visibility into transition-property, combined with @starting-style, to achieve a "fade in from none" effect; before that, the common practice is to simulate it with a visibility + opacity combination.

Per-Property Transitions

Separating properties with commas lets you set different durations and delays for each, giving composite motion more depth:

.dropdown {
  transition:
    opacity .15s ease,
    transform .2s ease-out .05s; /* the transform starts 50ms later than the opacity */
}

Respecting the Reduced-Motion Preference

Recall prefers-reduced-motion from Section 3.2 — any project that introduces transition/transform should also provide a reduced version:

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}