动画响应式失效因@media未重置关键帧或状态，应优先用transform/opacity、显式声明transition、独立keyframes名；prefers-reduced-motion下需设animation:none；iOS卡顿需will-change或translateZ(0)启硬件加速；改duration须先animation:none再重声明。
动画在不同屏幕尺寸下突然中断或错位
这是因为 @media 查询中直接覆盖了 animation 或 transition 属性，但没重置关键帧或起始/结束状态。浏览器不会自动“补全”被覆盖掉的动画上下文，导致过渡不连贯。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有响应式动画切换，优先用
transform+opacity，避免触发布局重排（width、height、top等会引发重排） - 媒体查询内必须显式声明完整的
transition，不能只写transition-property；例如：transition: transform 0.3s ease, opacity 0.3s ease;，而非只写transition: transform; - 如果用了
@keyframes，不同断点需定义独立名称（如slide-in-mobile和slide-in-desktop），避免复用同一动画名但规则冲突
用 prefers-reduced-motion 降级动画体验
不是所有用户都需要花哨过渡——系统级“减少动画”开关开启时，CSS 动画仍会执行，可能造成眩晕或性能浪费。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在根选择器或动画容器上加
@media (prefers-reduced-motion: reduce)查询 - 里面直接设
animation: none或transition: none，不要试图“减慢”或“简化”，而是彻底关闭 - 若必须保留视觉反馈，改用
opacity瞬时切换（无过渡）或visibility控制显隐，更安全
移动端 transition 卡顿或延迟触发
常见于 iOS Safari：元素首次进入视口时，transition 没生效，或动画卡在第一帧。本质是浏览器未将该元素纳入合成层，导致 CPU 渲染压力大。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给需要过渡的元素加
will-change: transform;（仅在必要时，别全局滥用） - 更稳妥做法是强制启用硬件加速：加
transform: translateZ(0);或transform: scale(1);（空变换） - 确保触发过渡的属性变更是同步的——比如不要在
setTimeout里改 class 后立刻读取offsetHeight，这会强制同步布局，打断过渡链
媒体查询中修改 animation-duration 不生效
直接在 @media 里改 animation-duration 往往无效，因为动画已启动，而 CSS 动画不支持运行时动态修改时长（除非重置 animation 整个简写属性）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
animation: none先清掉当前动画，再用animation: slide-in 0.2s ease;重新声明（含时长） - 更可靠的方式是控制动画触发时机：用
animation-play-state: paused/running配合类名切换，在 JS 中监听resize后手动重播 - 如果只是微调缓动，优先改
animation-timing-function（如从cubic-bezier(.4,0,.6,1)换成ease-out），它比改时长更易生效且平滑
真正难的不是写多少媒体查询，而是判断哪个属性该在哪个断点重置、哪个动画该停、哪个该换层——这些细节没对齐，过渡就永远像卡顿的 GIF。
