核心是将transition写在非:hover的基础状态中，声明需动画的属性、时长与缓动函数；:hover仅负责定义目标值，从而实现鼠标移入和移出的双向平滑过渡。
直接用 :hover 或 :active 伪类配合 transition 是最轻量、最可靠的方式；需要多阶段或循环动效才上 @keyframes + animation；click 触发必须靠 JS 切换 class，别硬写内联 style.animation。
怎么用 :hover 实现平滑过渡动画
核心是把变化属性写在伪类里，再用 transition 声明哪些属性要过渡、多久、什么曲线。不是所有 CSS 属性都能过渡——display、height（值为 auto 时）、z-index 都不行；但 transform、opacity、background-color 可以且性能好。
常见错误是只写 transition: all 0.3s，结果鼠标移入时字体大小、边框颜色、阴影全跟着动，视觉混乱；应该显式列出要动的属性：
button {
background: #333;
color: white;
transform: scale(1);
transition: background 0.2s ease, transform 0.2s ease;
}
button:hover {
background: #555;
transform: scale(1.05);
}
-
transform和opacity优先选，它们走 GPU 加速，不触发重排 - 避免在
:hover里改width/height，会引发布局抖动 - 如果元素初始状态是透明，
transition要写在基础选择器里，否则第一次 hover 无过渡
怎么用 click 触发动画（不刷新页面）
HTML 没有原生 :click 伪类，必须用 JS 监听点击并切换 class；CSS 负责定义这个 class 对应的动画行为。别在 JS 里直接写 el.style.animation = 'bounce 0.5s'——这样没法复用、难暂停、样式逻辑散落各处。
立即学习“前端免费学习笔记（深入）”；
正确做法是预设一个动画 class，在点击时加，动画结束后自动移除（可选）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.is-bouncing {
animation: bounce 0.5s ease-out;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
- 用
element.classList.add('is-bouncing')启动，别用replace或toggle，防止中途打断正在播放的动画 - 如果想点一次播一次，监听
animationend事件后调用remove；注意加前缀兼容旧版 Safari - 多个按钮共用同一动画？确保 class 名唯一，或用 data 属性区分状态，避免误删
为什么 :active 有时不生效或一闪而过
:active 只在鼠标按下/触摸期间生效，松开就结束，所以它适合做“按下去凹陷”这类瞬时反馈，不适合持续动画。常见失效原因有三：
- 父容器设置了
pointer-events: none，导致子元素收不到点击态 - 移动端未加
touch-action: manipulation，iOS Safari 默认延迟 300ms 才触发:active - 动画 duration 太长，比如写了
animation: pulse 2s infinite，但:active本身只维持几十毫秒，根本播不完
若需长按反馈，改用 JS 监听 touchstart + touchend，或结合 :focus（需元素可聚焦，如加 tabindex="0"）。
animation-fill-mode 怎么影响 hover/click 动画表现
默认情况下，animation 播完就回退到初始样式；加 animation-fill-mode: forwards 才能保持最后一帧。但这和 :hover 冲突：比如你 hover 时启动一个淡入动画，播完停在 opacity: 1，但鼠标移开后仍保持不透明——这不是想要的效果。
解决方法分场景：
- 纯交互反馈（如按钮点击弹一下）：不用
forwards，让动画自然归位 - 进入式动效（如侧边栏滑出）：用
forwards，但 hover 离开时得 JS 主动移除 class，或用另一个slideOut动画反向播放 - 滚动触发动画后想保持最终态：
forwards必须配animation-delay: 0s，否则首次进入可能闪现最终帧
最容易被忽略的是：当用 JS 控制 animation 播放时，animation-fill-mode 的行为依赖于 animation-direction 和是否循环，调试时建议先关掉 infinite，单次播放确认效果。
