html 本身无动态效果，需 css 动画/过渡或 javascript 控制 dom；推荐用 transition 处理悬停反馈，@keyframes 实现复杂动效，js 通过 class 切换解耦控制，注意性能优化与兼容性。
直接写 HTML 本身不会产生动态效果——所谓“动态”，必须靠 CSS 动画/过渡 或 JavaScript 控制 DOM 变化来实现。纯 HTML 标签（比如 <div>、<code><p></p>）只是静态容器，动不起来。
CSS transition 实现按钮悬停变色+缩放
这是最轻量、最常用、也最容易出效果的入门方式。适合按钮、卡片、菜单项等交互反馈。
-
transition必须作用在“原始状态”上，不是:hover里；否则鼠标移入瞬间就跳变，没有过渡 - 只对可动画属性生效：
opacity、transform、background-color等可以；height、width、margin触发重排，性能差，尽量避免 - 推荐组合写法：
transition: transform 0.2s ease, opacity 0.3s ease;—— 明确指定属性，比all 0.3s更可控、更安全
.btn {
padding: 8px 16px;
background: #4a90e2;
color: white;
border: none;
cursor: pointer;
/* ✅ 过渡定义放这里 */
transition: transform 0.2s ease, background-color 0.25s ease;
}
.btn:hover {
background-color: #357abd;
transform: scale(1.05);
}
@keyframes + animation 做加载动画或入场动效
需要循环、多阶段变化（比如旋转、弹跳、淡入后位移），就得用 @keyframes 配合 animation。注意：元素必须有明确的定位（position: relative/absolute）才能用 top/left 移动。
-
animation-fill-mode: forwards很关键——否则动画播完立刻回退到初始状态 - 避免用
animation: spin 2s infinite直接写死，建议拆成独立类（如is-loading），方便 JS 控制启停 - 不要给
body或大范围容器加无限动画，容易引发浏览器渲染压力，尤其低端设备
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-in {
animation: fadeInUp 0.4s ease-out forwards;
}
JavaScript 控制 class 切换来触发 CSS 动画
这是最健壮、解耦最好的做法：JS 不直接改样式，只管逻辑和状态；CSS 负责表现。比如点击展开、表单验证提示、模态框显隐。
- 别用
element.style.xxx = '...'写内联样式——难维护、无法复用、无法用transition - 用
element.classList.add('animate-open')/.remove()/.toggle()最稳妥 - 监听动画结束用
element.addEventListener('animationend', handler)，不是setTimeout——时间不准，且动画被用户跳过时会漏事件
<button id="toggleBtn">显示详情</button>
<div id="detailPanel" class="panel">这里是内容</div>
<p><style>
.panel { opacity: 0; max-height: 0; overflow: hidden; }
.panel.is-open {
opacity: 1;
max-height: 500px;
transition: opacity 0.3s ease, max-height 0.4s ease;
}
</style></p><p><script>
const btn = document.getElementById('toggleBtn');
const panel = document.getElementById('detailPanel');
btn.addEventListener('click', () => {
panel.classList.toggle('is-open');
});
</script></p>
容易被忽略的性能与兼容性细节
很多“动起来”的代码在开发机上看很顺，上线后卡顿或失效，问题常出在这些地方：
- 用
transform和opacity触发动画——它们走 GPU 合成层，不触发重排重绘；而left/top/width会强制浏览器计算布局，一卡就是整页 - IE11 不支持
animation-fill-mode: forwards，如果必须兼容，得用 JS 补监听 + 手动设终态样式 - 移动端 Safari 对
will-change: transform敏感，乱加反而降帧；真要优化，优先加在明确会动画的元素上，且动画结束后及时remove - 动画元素如果含大量子节点或背景图，记得加
contain: layout paint style（现代浏览器支持），减少渲染影响范围
