CSS 与布局 / CSS Transition · 状态间的隐式动画 待审核 6 页

CSS Transition · 状态间的隐式动画

transition 是 CSS 里最朴素的动画:你不写关键帧,只声明「哪些属性、用多久、什么曲线」,当这些属性因状态切换 (:hover / :focus / 加减 class / 改内联样式) 而改变时,浏览器自动在新旧值之间补间。一组可交互 demo 覆盖:四个子属性 transition-property/duration/timing-function/delay 与简写、哪些属性能插值哪些只能离散跳变、timing-function 的塑形、@starting-style + allow-discrete 做入场出场、以及 transition 半路被打断也能平滑反向这一招牌特性。

只需基础选择器与盒模型知识即可阅读,建议从「入门」开始。与 CSS Animation 系列 互为表里:那边讲 @keyframes 的完整时间线,这边讲两状态之间的隐式过渡;末页给出二者的取舍。涉及 @property / interpolate-size 等较新能力时,以最新 Chromium 内核为准。

transition-property / duration / timing-function / delay · 简写

入门：状态之间的隐式动画

transition 不主动播放，而是监听某些属性的值变化、自动补间。四个子属性与简写的顺序坑。

 interpolable vs discrete · by computed value · auto

可过渡性：能插值的与只能跳变的

不是所有属性都能 transition。可插值属性按 computed value 连续补间，离散属性默认在过渡中点直接跳变，height auto 另有解法。

 cubic-bezier · steps · linear() spring

timing-function：把过渡的快慢重新塑形

同样的起止值与时长，timing-function 决定中间怎么走。内置关键字、cubic-bezier 的四点控制、steps 的离散跳变与 linear() 的弹簧烘焙。

 @starting-style · transition-behavior: allow-discrete

入场与出场：让刚出现或将消失的元素也能过渡

元素刚插入 DOM 时没有旧值、过渡不触发，@starting-style 提供起始帧；出场则靠 allow-discrete 把 display 的翻转推迟到过渡结束。

 interruptible · 平滑反向 · vs @keyframes

可打断：半路改主意也顺滑

transition 天生可打断且可逆，半路反转时从当前值平滑往回走，而不是跳变或硬重启。这是它在交互反馈上常胜过 @keyframes 的地方。

 transition vs animation · 选型

transition vs animation：什么时候用哪个

transition 是两状态之间、由状态变化触发、隐式且天生可逆；@keyframes animation 是多关键帧、可自动播放与循环、显式。

相关文档 / 链接

📐 规范 / 文档

📖 延伸阅读