font-size 和 color 可直接用 transition 平滑过渡，前提是属性可动画且状态切换一致；需避免 display: none、统一单位与颜色格式，推荐 cubic-bezier(0.34, 1.56, 0.64, 1) 时序，并慎用 will-change。
font-size 和 color 能否直接用 transition 平滑过渡
可以，但必须满足两个前提：目标属性是可动画的，且变化发生在同一元素的同一状态切换中（比如 :hover、class 切换）。font-size 和 color 都属于 CSS 中原生支持插值的属性，不需要额外 polyfill。
常见错误是给 display: none 的元素加 transition —— 它不会触发过渡，因为元素在计算样式时已脱离渲染流。同样，用 visibility: hidden 也不行，它不触发布局重排，但 transition 仍会执行（只是你看不见）。
- ✅ 正确做法：用
opacity: 0+pointer-events: none替代display: none - ✅ 确保初始和结束状态都定义了
font-size和color（不能一个写16px，另一个写inherit） - ⚠️ 注意：如果父元素字体用
rem，子元素又用em，嵌套缩放可能造成非线性视觉变化，看起来“不平滑”
transition 写法里 timing-function 怎么选才不突兀
文字大小与颜色同时变化时，线性（linear）容易显得机械；ease（即 cubic-bezier(0.25, 0.1, 0.25, 1)）开头慢、中间快、结尾缓，更适合模拟自然阅读节奏。
但要注意：颜色过渡用 ease-out 可能导致末段变色过快，人眼对色相变化比尺寸更敏感。实测中，cubic-bezier(0.34, 1.56, 0.64, 1)（略带“回弹感”的缓出）对文字高亮类动效更友好。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
transition: font-size 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); - 不要写成
transition: all 0.3s ease;—— 会意外过渡其他属性（如border、margin），增加重绘开销 - 移动端慎用
ease-in-out：起始帧延迟明显，用户点击后有“卡顿错觉”
用 @keyframes 做动画时，color 和 font-size 要注意什么
@keyframes 没有 transition 的“状态约束”，所以能做更自由的变化，但也更容易翻车。核心问题是：浏览器对 color 的插值默认按 RGB 计算，遇到 HSL 或 hex 带透明度（如 #ff000080）时，可能产生意外中间色（比如从红到紫路过灰）。
另外，font-size 若在 keyframes 中混用单位（如 from 用 1rem，to 用 20px），Chrome 会静默转为 px 计算，但 Safari 可能 fallback 到整数倍缩放，造成跳变。
- 统一单位：全部用
px或全部用rem，避免跨单位插值 - 颜色用
hsl()更可控：比如hsl(0, 100%, 50%) → hsl(240, 100%, 50%)能保证色相匀速过渡 - 避免在
@keyframes中修改font-family：它不可动画，会强制 layout，打断文字平滑缩放
@keyframes highlight-grow {
from {
font-size: 16px;
color: hsl(200, 100%, 40%);
}
to {
font-size: 19px;
color: hsl(200, 100%, 20%);
}
}
动画卡顿？先检查是否触发了 layout
文字大小变化本身会触发 layout，但现代浏览器对 font-size + color 的组合优化较好。真正拖慢的是隐式 layout 触发源：比如动画元素的父容器用了 flex 且子项 align-items: baseline，font-size 变化会导致基线重算；或元素有 box-shadow 且未设 will-change: transform。
最轻量的提速方式是加 transform: translateZ(0) 或 will-change: font-size, color —— 但别滥用：will-change 在非动画期间会持续占用图层内存。
- 只在 hover/active 等触发瞬间加
will-change，动画结束立即移除（可用 JS 监听transitionend） - 移动端优先用
transform: scale()替代font-size变化：它走合成器管线，不触发 layout - 检查 DevTools 的 Rendering 面板，勾选 “Paint flashing” —— 如果文字区域频繁闪绿，说明每次都在重绘，得查是否用了
background-clip: text这类高开销属性
0.24s（接近 4 帧）比 0.3s 更难察觉卡顿，但也要留出余量应对低端机。 
