响应式模板中直接写animation易失效，因元素可能被display:none隐藏、媒体查询漏设animation-name或时长为0s、起始状态未恢复、父容器overflow:hidden裁剪动画路径。
transition 和 @keyframes 是响应式模板加动画最稳的两个入口，别一上来就堆 JavaScript 或第三方库。多数情况下，CSS 原生方案已足够，且兼容性好、性能可控、代码轻量。
为什么在响应式模板里直接写 animation 容易失效？
响应式模板通常依赖媒体查询（@media）切换布局，而 animation 的触发依赖元素“存在且可见”。常见失效场景包括：
- 元素在小屏下被
display: none隐藏，动画无法播放（display不支持过渡/动画） - 媒体查询中重写了
animation相关属性但漏了animation-name或时长为0s - 使用了
transform: scale(0)+opacity: 0隐藏，却没在对应断点里恢复，导致动画起始状态异常 - 父容器设置了
overflow: hidden，而动画位移超出裁剪范围，看起来像“没动”
transition 在响应式交互中怎么写才不翻车？
它适合按钮悬停、菜单展开、卡片折叠这类“状态切换”动效，但必须满足三个条件：有初始值、有变化值、属性可过渡。
- 优先用
transform和opacity，它们走合成层，不触发布局重排（reflow），比width/height安全得多 - 避免在
@media里只改transition-property而不统一transition-duration，否则不同屏幕下动效节奏割裂 - 移动端慎用
:hover—— 大部分触摸设备不触发，改用.is-open类 + JavaScript 切换更可靠 - 示例：一个响应式侧边栏开关
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.sidebar.is-active {
transform: translateX(0);
opacity: 1;
}
@media (min-width: 768px) {
.sidebar {
transform: translateX(0); /* 桌面端默认展开 */
opacity: 1;
}
.sidebar.is-active {
/* 桌面端无需动画，直接生效 */
}
}
如何让 @keyframes 动画适配不同视口宽度？
关键不是“重写整个动画”，而是通过 CSS 自定义属性（-- 变量）动态调整参数，再配合媒体查询注入不同值。
- 把动画中可变的部分抽成变量：位移距离、时长、延迟、缩放比例
- 在
:root设默认值，在@media中覆盖，@keyframes内直接引用变量（注意：Safari 15.4+ 才完全支持变量在@keyframes中生效） - 降级方案：为不同断点单独写一套
@keyframes，用类名区分，如animate-slide-in-mobile/animate-slide-in-desktop - 必须设
animation-fill-mode: both，否则动画结束后元素会跳回原始状态，尤其在响应式切换时明显
JavaScript 控制动画时，哪些 DOM 操作会打断响应式动效？
不是所有 JS 触发都安全。以下操作容易导致动画卡顿或丢失首帧：
- 在
DOMContentLoaded里立刻加animation类 —— 此时样式可能还没解析完，浏览器来不及渲染第一帧 - 用
offsetTop、getComputedStyle强制同步读取布局信息，触发重排，阻塞动画线程 - 滚动监听中频繁增删动画类，没做节流（
throttle）或使用IntersectionObserver替代 - 正确做法：用
requestAnimationFrame包裹类操作，或监听load后延时16ms再触发
真正难的不是写出动画，而是让动画在断点切换、DOM 插入、用户滚动这些真实场景下不掉帧、不闪跳、不重叠。变量控制、合成属性选择、时机判断，这三块最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
