css如何实现元素动态变化_使用transition和animation制作动画

transition需属性值变化且可过渡，须写在初始状态；animation需@keyframes定义关键帧。交互简单选transition，多阶段或自主运行选animation；优先用transform/opacity提升性能。

transition 触发条件和常见失效原因

transition 不是自动播放的动画，它只在元素的 css 属性值发生「变化」时才起效，且这个变化必须是可过渡的（如 opacity、transform、background-color），不能是 display 或 height: auto 这类不可计算的值。

容易踩坑的地方：

• transition 必须写在「初始状态」上，不是 hover 或 active 状态里；否则第一次变化没过渡效果
• 从无到有添加 class 触发动画时，得用 setTimeout(() => el.classList.add('active'), 0) 或 el.offsetHeight 强制触发重排，否则浏览器可能合并样式计算，跳过过渡
• transition: all 0.3s 看似方便，但会过渡所有可变属性（包括意外改变的 box-shadow、z-index），建议明确写出需要过渡的属性，比如 transition: transform 0.2s, opacity 0.2s

animation 需要 @keyframes 配合才能生效

animation 是独立于状态变化的主动播放机制，但它本身不定义动画过程——必须先用 @keyframes 命名一段关键帧规则，再通过 animation-name 引用。

典型写法：

立即学习“前端免费学习笔记（深入）”；

@keyframes slideIn {   from { transform: translateX(-20px); opacity: 0; }   to { transform: translateX(0); opacity: 1; } } .element {   animation: slideIn 0.4s ease-out forwards; }

注意点：

• forwards 保证动画停在最后一帧，否则元素会“弹回”初始状态
• 不要用 animation-delay 模拟“hover 后延迟出现”，它只控制播放起点，不影响触发时机；真正要做悬停延迟，得结合 transition-delay 或 js 控制 class 添加时机
• animation-fill-mode: backwards 可让动画未开始前就应用 from 样式，但仅对首次播放有效，循环动画（infinite）下意义有限

transition 和 animation 选哪个？看控制粒度

如果动画由用户交互直接触发（比如按钮 hover、菜单展开），且只需要两个状态间平滑切换，transition 更轻量、更易维护。它依赖状态变更，天然契合 CSS 的声明式逻辑。

如果需要多阶段运动（如弹跳、路径移动）、循环播放、或脱离用户操作自主运行（比如加载指示器），就必须用 animation。

二者也能共存：比如用 animation 做图标旋转，同时用 transition 控制父容器的缩放，互不干扰。

性能提示：优先用 transform 和 opacity，它们能走合成层（compositor），避免触发布局（layout）和绘制（paint）。别对 width、left、background-color（旧版浏览器）做长时动画。

JS 主动控制 animation 播放状态的实用技巧

纯 CSS 动画有时不够灵活，比如想暂停、重播、或根据数据动态调整持续时间。这时可以用 JS 操作 animation-play-state 或切换 animation-name。

示例：点击按钮重播一次入场动画

el.addEventListener('click', () => {   el.style.animation = 'none';   el.offsetHeight; // 强制重排   el.style.animation = 'slideIn 0.4s ease-out'; });

更稳妥的方式是切换 class：

• 定义 .animate-slideIn { animation: slideIn 0.4s ease-out; }
• 移除再添加该 class，利用浏览器对 class 切换的重排机制
• 避免直接操作 style.animation，防止内联样式覆盖 CSS 文件中的其他 animation- 属性

复杂交互动画中，CSS 动画只是表现层，真正难的是状态同步——比如一个元素正在 animation 中，此时用户又点了关闭，就得判断是否中断、回退，还是忽略。这类逻辑往往得靠 JS 维护播放状态标记，而不是只靠 CSS。