动画可自动播放，过渡需状态变化触发；transition依赖:hover等状态改变才生效，animation通过@keyframes定义并可自启、循环、暂停。
动画（animation）和过渡（transition）最核心的区别在于：过渡需要“状态变化”来触发，而动画可以自动播放。
transition 不是独立运行的，它只在元素的 CSS 属性值发生改变时起作用——比如鼠标悬停（:hover）、焦点获取（:focus）、类名切换（JavaScript addClass）等。没有状态变化，它就完全不生效。
transition: all 0.3s，但没加 :hover 或没改 class？→ 看不到任何效果transition: color 0.3s？→ 颜色瞬间跳变，没有渐变过程transition 做不到，它不监听初始渲染animation 是你提前定义好关键帧（@keyframes），再通过属性控制它何时、如何播放。它可以自动开始、循环、暂停，甚至不需要用户交互。
animation: slideIn 1s ease-out + @keyframes slideIn {...}，元素加载后就能自己滑入animation-delay 可以错开多个动画启动时间animation-play-state: paused 还能手动控制暂停/继续让按钮背景色从蓝变红：
立即学习“前端免费学习笔记（深入）”；
button { background: blue; transition: background 0.4s; } button:hover { background: red; }
@keyframes changeBg { from { background: blue; } to { background: red; } }，再给按钮加 animation: changeBg 0.4s forwards;，它就会自己执行一遍想实现效果时，先问自己：
transition
animation
transition 更轻量、易维护以上就是css初学者分不清动画和过渡怎么办_理解transition依赖状态变化的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
281
收藏
取消收藏
