导航条 hover 文字缩放动画最轻量写法是：给导航项设 transition: transform 0.2s ease，:hover 中用 transform: scale(1.15)；避免 scale(1.2+) 防重排模糊，且父容器禁用 overflow: hidden。
导航条 hover 时文字缩放动画怎么写？
直接用 CSS 的 transform: scale() 最轻量，不需要 JS。关键点是必须加 transition 控制变化节奏，否则动画会突兀跳变。
常见错误是只写 transform: scale(1.2) 却漏掉过渡声明，结果鼠标划过时文字瞬间放大，没有“动”的感觉。
- 给导航项（如
<a></a>或<li>）设置transition: transform 0.2s ease - 在
:hover中写transform: scale(1.15)（别用 1.2+，易触发字体重排导致边缘模糊） - 确保父容器没设
overflow: hidden，否则放大会被裁切
下划线从左到右滑入的动画怎么实现？
本质是用伪元素 ::after 模拟线条，再靠 transform: scaleX() 控制宽度变化。纯 CSS，兼容性好（Chrome 36+、Firefox 16+ 都支持）。
容易踩的坑是伪元素默认宽高为 0，且没设 content: "" 就完全不渲染；另外如果父元素用了 display: inline，::after 的定位会失效。
立即学习“前端免费学习笔记（深入）”；
- 给导航链接加
position: relative -
::after设content: ""、position: absolute、bottom: 0、left: 0、width: 100%、height: 2px - 初始状态设
transform: scaleX(0)，transform-origin: left -
:hover::after中设transform: scaleX(1)，并配transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)（比默认ease更有弹性感）
点击后高亮状态如何保持且带动画？
不能只靠 :active，它只在鼠标按下瞬间生效。得用 JS 切换 class，再用 CSS 动画收尾。
重点在于：动画要区分“进入”和“离开”，否则切换菜单时所有项一起闪。CSS 中用 transition 控制进，用 transition-delay 控制出，或直接用 @keyframes 精确控制。
- JS 里用
element.classList.add("active")添加状态类，同时移除其他项的active - CSS 中写
.nav-item.active { background-color: #4a6fa5; }，并加transition: background-color 0.25s ease - 如果想让背景色“扩散”出来，改用
background-image: linear-gradient(...)+background-size动画，但注意 Safari 对background-size动画支持不稳定，建议降级为纯色过渡
移动端点击无反馈？动画卡顿怎么办？
iOS Safari 和部分安卓 WebView 默认禁用非 scroll / zoom 的 touch 动画，还可能因强制重绘导致 60fps 掉帧。
最有效的是把动画属性提升到合成层（compositing layer），避开主线程重排重绘。不是所有属性都能触发合成，只有 transform 和 opacity 是安全的。
- 把所有动画都绑定到
transform（比如用translateY()替代top）或opacity，避免触发动画期间的 layout - 给导航容器加
will-change: transform（仅对频繁动画的元素启用，别滥用） - 移动端加
cursor: pointer和-webkit-tap-highlight-color: transparent消除点击灰块 - 真机测试时发现卡顿，先查 DevTools 的 Rendering 面板，看是否出现“Paint flashing”高频闪烁——那说明你用了
background-color或box-shadow动画，得重构
:hover 在触摸屏根本不会触发，必须靠 JS 模拟；而某些安卓浏览器对 cubic-bezier() 解析有偏差，看着顺滑的曲线在旧机型上可能一顿一顿。这些细节不真机连测几轮，光看桌面预览根本发现不了。 
