CSS动画与过渡结合如何使用_使用CSS animation配合transition实现元素状态切换动画-css教程-PHP中文网

CSS动画与过渡结合如何使用_使用CSS animation配合transition实现元素状态切换动画

P粉602998670

发布： 2025-11-23 20:19:02

原创

347人浏览过

使用CSS animation与transition结合可实现更流畅的交互效果。transition负责属性值间的平滑过渡，如颜色、宽度变化；animation则通过@keyframes定义复杂动画，如抖动、弹跳。典型应用如按钮点击反馈：点击触发animation播放一次性抖动效果，结束后通过JavaScript移除类名，transition继续处理其他状态变化。例如提示框先用animation实现缩放弹出，再通过JS添加带transition的类实现淡出。注意避免同一属性同时设置两者导致冲突，利用animationend和transitionend事件精确控制流程，确保动画可重复触发且不干扰常规过渡效果。

css动画与过渡结合如何使用_使用css animation配合transition实现元素状态切换动画

在网页开发中，让元素的状态切换更自然流畅，仅靠单纯的 CSS transition 有时无法满足复杂动画需求。通过将 CSS animation 与 transition 配合使用，可以实现更精细的动画控制，比如按钮点击反馈、加载状态切换、菜单展开收起等场景。

理解 transition 与 animation 的分工

transition 适合处理属性值之间的平滑过渡，比如宽度、颜色、透明度的变化。它依赖于状态改变（如 hover、class 切换）触发。而 animation 更适合定义关键帧（@keyframes），实现独立运行、循环或更复杂的视觉效果。

两者结合使用时，通常由 transition 控制常规状态切换，animation 负责一次性播放的动画片段，比如“弹跳提示”、“闪烁高亮”等。

常见使用场景：点击后播放动画并恢复状态

例如一个按钮，点击后需要快速抖动一下表示反馈，然后回到原始状态。这种“一次性动画 + 状态还原”的需求，适合用 animation 播放抖动，transition 控制其他属性的缓动。

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

示例代码：

<button class="btn">点击我</button>

登录后复制

.btn {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* 过渡用于背景色、文字颜色等常规变化 */
  transition: background 0.3s, color 0.3s;
}
<p>/<em> 定义抖动动画 </em>/
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}</p><p>/<em> 添加类名触发动画 </em>/
.btn.animate {
animation: shake 0.5s ease-in-out;
}</p>

登录后复制

JavaScript 控制动画触发：

必应图像创建器

微软必应出品的AI绘图工具

593

查看详情

document.querySelector('.btn').addEventListener('click', function () {
  this.classList.add('animate');
  // 动画结束后移除类，避免重复播放
  this.addEventListener('animationend', function () {
    this.classList.remove('animate');
  }, { once: true });
});

登录后复制

这样，点击按钮时播放抖动动画，animation 执行完毕后自动清理类名，transition 仍可继续处理后续的悬停等交互效果。