transition 过渡
transition 让 CSS 属性值变化时不是“跳变”而是平滑过渡。写法：transition: 属性 时长 缓动 延迟。最常用的是 transition: all .3s，但指定具体属性（如 transform）性能更好。
缓动函数决定节奏：ease 默认起步加速、linear 匀速、cubic-bezier 可自定义“回弹”手感（如 cubic-bezier(.34,1.56,.64,1) 有轻微过冲）。
- 只有可动画属性（颜色、尺寸、transform、opacity 等）才能过渡
- all 方便但浪费：浏览器要检查所有属性，建议写具体属性
- cubic-bezier(1.5,…) 中间值 >1 会产生“回弹”效果
HTML
<style> .bar { width: 120px; height: 40px; margin: 12px auto; border-radius: 8px; background: #e5534b; transition: width .6s cubic-bezier(.34,1.56,.64,1); } .wrap:hover .bar { width: 320px; } </style> <div class="wrap" style="padding:30px 0"> <div class="bar"></div> <div class="bar" style="background:#4a9eff"></div> <div class="bar" style="background:#57ab5a"></div> </div> <p style="text-align:center;color:#888">鼠标悬停这一整块，三条条平滑变宽（带回弹缓动）</p>
本节要点transition = 属性 + 时长 + 缓动 + 延迟；回弹手感来自 cubic-bezier 中间值大于 1。
