浏览器不支持在@media中定义或重定义@keyframes，必须用不同名称的@keyframes配合animation-name在媒体查询中切换，并统一使用小写中划线命名、添加-webkit前缀以兼容旧版Safari和IE11。
media查询里改@keyframes根本没用
浏览器不支持在@media块内定义或重定义@keyframes。你写进去，CSS解析器直接忽略——连警告都不会抛。这不是兼容性问题，是语法层面被禁止的。很多开发者调半天发现动画没变，其实是白写了。
真正可行的路只有一条：用不同名字的@keyframes，再通过animation-name在媒体查询里切换。
- 每个断点对应一组独立命名的
@keyframes，比如slide-in-mobile、slide-in-desktop -
animation-name必须写在元素选择器里（不能只写在@media里），否则无法生效 - 别忘了同时切换
animation-duration和animation-timing-function，否则节奏会突兀
怎么让移动端动画更轻量
小屏幕设备性能弱、网络慢，动画不该照搬桌面版。重点不是“能不能动”，而是“动得值不值”。
- 移动端优先用
transform和opacity属性动画，避开height、margin这类触发布局重排的属性 - 把
animation-duration设短些，比如0.25s比0.6s更符合手指操作反馈节奏 - 加
prefers-reduced-motion: reduce兜底，iOS/Android系统开启“减少动画”时能自动禁用
示例：
button { animation: tap-bounce 0.25s ease-out; }<br>@media (max-width: 768px) {<br> button { animation-name: tap-bounce-mobile; }<br>}<br>@media (prefers-reduced-motion: reduce) {<br> button { animation: none; }<br>}
立即学习“前端免费学习笔记（深入）”；
animation-name切换时的闪动问题
直接换animation-name会导致动画从头开始，如果前一个动画还没播完，就会卡一下或跳帧。
- 确保新旧
@keyframes的起始帧（0%）状态一致，比如都设transform: translateX(0) - 用
animation-play-state: paused先暂停当前动画，再改animation-name，最后play——但注意这需要JS配合，纯CSS做不到 - 更稳妥的做法：用
animation-delay微调，让新动画“接上”旧动画的视觉节奏，比如延迟-0.1s
IE11和Safari 13.1之前的老版本要注意什么
这些浏览器对@keyframes名称的大小写敏感，且不支持prefers-reduced-motion。别指望它们能优雅降级。
- 所有
@keyframes名统一用全小写+中划线，比如fade-in-sm，避免fadeInSm这种驼峰写法 - 老Safari需要
-webkit-前缀，但注意@-webkit-keyframes和@keyframes必须都存在，且名字完全一致 - IE11不支持
animation-fill-mode: forwards在媒体查询切换后的保持效果，得靠JS补位或改用transition模拟
响应式动画真正的难点不在写法，而在判断“这个动效在320px宽的低端安卓机上，是不是真的提升了体验”。很多时候删掉它，反而更稳。
