← 首页 / 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 的核心心智：它不主动播放，而是「监听某些属性的值变化、自动补间」。逐个讲四个子属性——过渡哪些属性（transition-property，含 all 的代价）、多久 (duration)、什么曲线 (timing-function)、延迟多少 (delay)，再到逗号分隔的多属性写法与简写顺序坑（两个时间值谁是 duration 谁是 delay）。可拖参数实时看一个方块在 hover 前后如何过渡。

interpolable vs discrete · by computed value · auto

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

不是所有属性都能 transition。讲清两类：可插值（数值 / 颜色 / 长度，按 computed value 连续补间）与离散（display / visibility / content 等，默认在过渡中点直接跳变）。再到老大难——过渡到 height: auto 为何无效，以及 interpolate-size: allow-keywords / calc-size() 的解法（折叠面板平滑展开）。每类配可拖进度条的对照 demo。

cubic-bezier · steps · linear() spring

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

同样的起止值与时长，timing-function 决定中间怎么走。内置关键字 (ease / linear / ease-in-out…) 与 cubic-bezier(x1,y1,x2,y2) 的四点控制（含过冲）、steps() 的离散跳变（jump-* 关键字），以及用 linear() 多点采样把弹簧物理烘焙进过渡（与 CSS Animation 的 spring 页同源）。拖控制点 / 切换函数实时预览方块运动节奏。

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

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

transition 需要「旧值」才能补间，可元素刚插入 DOM 时没有旧值、过渡不触发；@starting-style 提供这个起始帧让入场动起来。出场更难：元素一旦 display:none 就立即消失、来不及播——transition-behavior: allow-discrete 让离散属性（含 display）也参与过渡，配合 @starting-style 实现完整的进入 / 退出生命周期。与 CSS Animation 的 starting-style 页相比，这里聚焦 transition 路线的进出场。

interruptible · 平滑反向 · vs @keyframes

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

transition 最被低估的招牌特性：它天生可打断且可逆——过渡进行到一半，触发条件反转（鼠标移出）时，它从当前值平滑反向回去，而不是跳变或硬重启。这正是 hover 反复进出却始终丝滑的原因，也是它在交互反馈上常胜过 @keyframes（后者半路打断会突兀重置）的地方。一个反复 hover 的对照 demo:transition 版 vs animation 版，看打断瞬间的差别。

transition vs animation · 选型

transition vs animation：什么时候用哪个

两者都做补间，边界很清楚：transition 是「两状态之间、由状态变化触发、隐式、天生可逆」，适合 hover/focus/展开收起这类交互反馈；@keyframes animation 是「多关键帧、可自动播放 / 循环 / 编排、显式」，适合 loading、循环装饰、入场序列。一张对照表 + 同一效果两种写法并排，并指回 CSS Animation 系列。