小屏幕动画卡顿主因是固定时长超出帧预算及非transform属性触发重排重绘；应优先使用transform/opacity、放宽duration、合理用will-change；媒体查询中须完整重写animation简写；避免vh/vmin导致错位；@keyframes需全局声明；复杂布局耦合需JS动态计算。
动画在小屏幕下卡顿或跳帧
根本原因是固定时长的 animation-duration 在低性能设备或高DPI屏上容易超出帧预算，尤其当动画涉及 transform 以外的属性（比如 width、background-color）时，触发重排重绘，响应式缩放后更明显。
- 优先把动画迁移到
transform和opacity上，它们能走合成线程 - 在小屏媒体查询中把
animation-duration放宽 20%～30%，例如从0.3s改为0.4s - 添加
will-change: transform（仅对真正需要动画的元素），但别滥用，否则可能引发内存泄漏
@media 中重写 animation-timing-function 不生效
常见于用 animation: slide-in 0.4s ease-out 简写声明后，在媒体查询里只改 animation-timing-function，结果无效——因为简写会覆盖整个动画声明，必须重复写全参数。
/* ❌ 错误：只改 timing-function，其他参数被重置为默认值 */
@media (max-width: 768px) {
.card {
animation-timing-function: linear;
}
}
<p>/<em> ✅ 正确：完整重写，保留 duration / delay / iteration-count 等 </em>/
@media (max-width: 768px) {
.card {
animation: slide-in 0.4s linear 0s 1 forwards;
}
}动画在 viewport 缩放后错位或尺寸异常
移动端双击放大、iOS Safari 横竖屏切换时，vh/vmin 单位会动态变化，若动画关键帧依赖这些单位（比如 transform: translateY(100vh)），就容易偏移。这不是动画本身问题，而是响应式单位在视口重计算时的副作用。
- 避免在
@keyframes中直接用vh、vmin，改用rem或 JS 动态注入像素值 - 监听
resize和orientationchange，用getComputedStyle重新计算并更新style.animationName触发重播 - 对关键入场动画，加
animation-fill-mode: backwards防止初始闪动
媒体查询嵌套太深导致动画失效
某些旧版浏览器（如 iOS Safari 13.3 以下）不支持在 @media 内部嵌套 @keyframes，如果写了类似下面的结构，动画会静默失败：
立即学习“前端免费学习笔记（深入）”；
@media (prefers-reduced-motion: reduce) {
@keyframes fade-in {
to { opacity: 1; }
}
}实际应把 @keyframes 提到全局作用域，只在媒体查询中控制 animation 的启用与否：
@keyframes fade-in {
to { opacity: 1; }
}
<p>@media (prefers-reduced-motion: reduce) {
.fade-element {
animation: none;
opacity: 1;
}
}真正难处理的是动画节奏和布局耦合的情况——比如一个侧边栏滑入动画，它的 transform 距离取决于当前容器宽度，这时候光靠 CSS 媒体查询不够，得结合 JS 获取 offsetWidth 后动态设置 style.setProperty('--slide-distance', ...)。
