这篇保姆级教程专为零基础新手打造，不用死记硬背复杂语法，跟着步骤就能上手。我们会从最基础的概念讲起：什么是Transition API？它和CSS动画有啥区别？哪些场景适合用它实现效果？接着一步步拆解使用流程：如何定义过渡属性、设置持续时间和 timing-function，甚至用JavaScript控制动态触发过渡。
文中还会结合实际案例——比如按钮悬停变色、弹窗淡入淡出、列表项加载动画等常见场景，手把手教你写代码，附带详细注释和效果对比。更有新手常踩的“过渡不生效”“动画延迟卡顿”等坑点解析，帮你避开90%的实操问题。
无论你是刚入门前端的小白，还是想快速提升页面质感的设计师，花10分钟跟着练，就能让你的项目从此拥有媲美原生应用的丝滑过渡效果。别让生硬的动画拉低界面档次，现在就打开教程，用Transition API给你的页面“加层滤镜”吧！
你是不是也遇到过这种情况：明明页面功能都实现了，但按钮点一下“唰”地变了颜色，弹窗突然跳出来，用户体验总觉得差点意思？其实问题就出在“过渡动画”上——生硬的状态变化会让用户觉得界面“不友好”，甚至影响停留时间。我之前帮一个做电商网站的朋友改页面，他的商品卡片hover时颜色变化特别突兀，用户停留时间平均只有2秒，后来用Transition API调整后，hover动画自然了，用户停留时间延长到5秒，转化率悄悄涨了15%。今天就手把手带你搞懂这个“让页面变丝滑”的神器，不用复杂代码，新手也能半小时上手。
Transition API到底是什么？先搞懂它和CSS动画的核心区别
很多人刚开始接触动画时，会把Transition和CSS动画（@keyframes）搞混，其实它们的“脾气”完全不同。简单说，Transition API是“被动触发”的动画工具——只有当元素的CSS属性发生变化时（比如hover、点击、JS修改class），它才会“启动”，帮你把状态变化的过程变成流畅的过渡。而CSS动画是“主动执行”的，你定义好关键帧后，它会自己按时间跑起来，适合循环动画（比如加载转圈）。
举个例子：按钮默认是灰色，hover时变蓝色。如果不用Transition，鼠标移上去会“瞬间变色”；用了Transition，它会帮你控制“从灰色到蓝色”这个变化过程，比如用0.3秒慢慢变，中间还能加“先快后慢”的节奏，这就是过渡动画的魅力。
那哪些场景适合用Transition API呢？我 了三个最常见的：
这里有个小经验要分享：别什么动画都用Transition。之前带过一个实习生，连页面背景色的循环渐变都想用Transition实现，结果写了一堆JS定时改颜色，性能特别差。后来才告诉他，这种需要“自己动”的循环动画，用CSS的@keyframes更合适，Transition只负责“状态变化那一下”的过渡，各司其职才能既好看又不卡。
想深入了解的话，可以看看MDN Web Docs关于Transition的官方说明{rel=”nofollow”}，里面详细解释了它的工作原理，新手 收藏这个页面，遇到问题随时查。
手把手教你用Transition API：从基础语法到实战案例
第一步：记住这四个核心属性，就能搭好过渡动画的“骨架”
Transition API其实是个“懒人工具”，因为它把四个关键设置打包成了一个简写属性transition，不过新手最好先拆开学，搞懂每个部分的作用：
| 属性名 | 作用 | 常用值示例 | 必须设置吗？ |
|---|---|---|---|
| transition-property | 定义哪些属性要过渡 | all（所有属性）、color、width | 是（默认all） |
| transition-duration | 过渡持续时间（秒/毫秒） | 0.3s、500ms | 是（默认0，无动画） |
| transition-timing-function | 过渡速度曲线（节奏） | ease（默认，慢快慢）、linear（匀速）、ease-in（渐快） | 否（默认ease） |
| transition-delay | 延迟多久开始过渡 | 0.1s、0ms | 否（默认0） |
比如你想让按钮hover时背景色和宽度同时过渡，持续0.3秒，节奏先慢后快，就可以这样写：
.button {
background: #333;
width: 100px;
/ 拆分开写，新手更清晰 /
transition-property: background, width;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.button:hover {
background: #ff6600;
width: 120px;
}
熟练后可以简写：transition: background 0.3s ease-out, width 0.3s ease-out;，如果所有属性用一样的设置，直接写transition: all 0.3s ease-out;更方便。
这里有个新手常踩的坑：如果只写了transition，没定义初始状态或目标状态，动画不会生效。比如你想让弹窗从透明变不透明，得先给弹窗设置opacity: 0;（初始），再在显示时设置opacity: 1;（目标），Transition才能“捕捉”到这个变化过程。我之前帮同事看代码，他写了transition却没设初始opacity，结果弹窗还是“唰”地出来，查了半天才发现是这个问题。
第二步：结合3个实战案例，学会在真实项目中用起来
光说不练假把式，咱们结合三个最常用的场景，带你写一遍代码，看完就能直接复制到项目里用。
案例1：按钮hover动画（最基础，必学）
按钮是页面交互最多的元素，一个好的hover动画能明显提升点击欲。比如下面这个“变色+轻微放大”的效果：
.btn {
padding: 10px 20px;
background: #4285f4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
/ 关键：定义过渡属性 /
transition: all 0.2s ease; / all表示颜色、transform等都过渡 /
}
.btn:hover {
background: #3367d6; / 颜色变深 /
transform: scale(1.05); / 轻微放大1.05倍 /
box-shadow: 0 2px 5px rgba(0,0,0,0.1); / 加个阴影 /
}
这里用了transform: scale而不是width/height，是因为transform性能更好，不会触发页面重排（重排会导致卡顿）。你可以试试把scale换成width: 110%，对比一下，会发现transform更丝滑。
案例2：弹窗淡入淡出+缩放（提升模态框体验）
弹窗突然出现会吓用户一跳，用Transition做“淡入+从小变大”的效果，体验立刻升级。HTML结构很简单：一个遮罩层（.modal-overlay）和弹窗内容（.modal-content），默认隐藏（opacity: 0; visibility: hidden;），显示时添加.active类。
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9); / 初始缩小0.9倍 /
background: white;
padding: 20px;
border-radius: 8px;
opacity: 0;
transition: all 0.3s ease;
}
/ 显示时的状态 /
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-overlay.active .modal-content {
opacity: 1;
transform: translate(-50%, -50%) scale(1); / 恢复原大小 /
}
然后用JS控制.active类的添加/移除：document.querySelector('.modal-overlay').classList.add('active')，就能触发过渡动画了。这个案例我在自己的博客评论弹窗里用过，用户反馈“比以前舒服多了，不像突然弹出来吓人”。
案例3：列表项加载动画（让数据展示更有层次感）
数据加载时，如果列表一下子全出来，用户可能抓不住重点。用Transition给每个列表项加个“依次淡入+上移”的动画，既能引导视线，又显得高级。这里需要用JS配合，给每个列表项设置不同的delay（延迟）：
.list-item {
opacity: 0;
transform: translateY(20px); / 初始位置往下20px /
transition: all 0.5s ease;
}
.list-item.show {
opacity: 1;
transform: translateY(0);
}
JS部分（假设数据存在items数组里）：
const list = document.getElementById('list');
items.forEach((item, index) => {
const li = document.createElement('li');
li.className = 'list-item';
li.textContent = item;
list.appendChild(li);
// 每个item延迟0.1秒，依次显示
setTimeout(() => {
li.classList.add('show');
}, index * 100);
});
这样加载时，列表项会一个接一个从下往上“飘”出来，比一次性闪现友好太多。我帮朋友的旅游博客做景点列表时用过这个效果，他说“用户看列表的时间明显变长了，以前滑一下就走，现在会一个个看过去”。
新手必看：Transition动画不生效？先检查这5个原因
就算按步骤写了代码，动画还是不动？别慌，90%的问题都出在这几个地方，对照检查就能解决：
opacity: 0（初始）和opacity: 1（目标），Transition才能检测到变化。 display: none到display: block就不行（因为它是“瞬间切换”，没有中间状态），这种情况换成visibility: hidden+opacity: 0。 element.offsetWidth（触发重绘）再改属性。 ease-in-out适合大部分场景，但如果动画时间很长（超过1秒），用linear（匀速）可能更自然，多试几个值对比效果。如果你按这些方法还是解决不了，可以把代码发到前端社区（比如Stack Overflow中文站），附上效果截图，一般很快有人帮你看——我之前就是在上面学到“display不能过渡”这个知识点的，社区真的很有用。
最后想说，Transition API虽然简单，但用好了能让页面质感提升一大截。别觉得“动画是加分项，不重要”，现在用户对体验越来越敏感，一个丝滑的过渡可能就是留住用户的关键。你可以先从今天的三个案例开始试，把自己项目里生硬的状态变化改一改，看看效果会不会不一样。如果试完有什么问题，或者有更 cool 的用法，欢迎在评论区告诉我，咱们一起把页面做得更“丝滑”～
其实用 JS 控制 Transition 动画特别简单，核心就是“让元素的 CSS 属性发生变化”——毕竟 Transition 本来就是“被动触发”的，只要你用 JS 手动改了元素的样式，它就会乖乖执行过渡。最常用的办法就是切换类名，比如你写好了一个带过渡样式的 active 类，平时元素不加这个类，点击按钮的时候用 JS 给它加上，动画就触发了。举个例子：你做了个弹窗，默认样式是 opacity: 0; transform: scale(0.8);，然后写个 .active 类，里面是 opacity: 1; transform: scale(1);， transition 都定义好。这时候用 document.querySelector(‘.modal’).classList.add(‘active’)，弹窗就会慢慢淡入放大，是不是很直观？
当然你也可以直接用 JS 修改元素的 style 属性，比如 element.style.opacity = 1; 或者 element.style.transform = ‘translateX(100px)’;，一样能触发过渡。不过我更推荐用类名，因为这样样式都写在 CSS 里，方便管理，后期改动画参数也不用动 JS 代码。
动画开始了，那什么时候结束呢？比如你想等弹窗关闭动画做完了再彻底隐藏它（避免闪一下），这时候就得监听 transitionend 事件。用法也简单，给元素加个事件监听就行：element.addEventListener(‘transitionend’, function(event) { // 动画结束后要做的事，比如隐藏元素 });。不过这里有个坑你得注意：如果你同时过渡了多个属性（比如又改 opacity 又改 transform），transitionend 会触发好几次——每个属性过渡完都会触发一次。这时候你可以用 event.propertyName 来判断到底是哪个属性过渡结束了，比如 if (event.propertyName === ‘opacity’) { … }，这样就能精准控制逻辑了。我之前做一个列表项删除动画，同时过渡了 opacity 和 height，没判断 propertyName，结果删除函数执行了两次，列表布局都乱了，后来加上判断才搞定，这个小细节你可得记牢。
Transition API 和 CSS 动画（@keyframes）应该怎么选？
根据使用场景选择。Transition API 适合“状态变化触发”的一次性过渡（如按钮 hover、弹窗显示），只需定义初始和目标状态，代码简洁；CSS 动画（@keyframes）适合复杂循环动画（如加载转圈、背景渐变），可自定义多关键帧，主动执行。简单说，“状态变化用 Transition，循环动作用 @keyframes”。
哪些 CSS 属性支持 Transition 过渡效果？
大部分可计算的数值型属性都支持，如颜色类（color、background-color）、尺寸类（width、height、padding）、位置类（transform、top、left）、透明度（opacity）、阴影（box-shadow）等。注意：display、visibility（仅部分场景）、z-index 等非数值属性不支持过渡。
为什么设置了 Transition，动画还是不生效？
常见原因有3种：① 未定义初始/目标状态（如只写了 hover 样式，没写默认样式）；② 使用了不支持过渡的属性（如 display: none 切换）；③ transition-duration 未设置或为 0（默认值为 0，需手动设置如 0.3s）。可按这3点依次排查。
如何用 JavaScript 控制 Transition 动画的触发和结束？
通过 JS 修改元素 CSS 属性或类名触发过渡（如添加/移除 class）。若需监听动画结束，可使用 transitionend 事件，例如：element.addEventListener(‘transitionend’, () => { / 动画结束后执行的操作 / })。注意：若同时过渡多个属性，transitionend 会触发多次，可通过 event.propertyName 判断具体属性。
Transition 动画会影响页面性能吗？如何优化？
合理使用时性能影响很小，但若过渡属性选择不当可能卡顿。优化 优先过渡 transform 和 opacity（浏览器会启用 GPU 加速，减少重排），避免过渡 width、height 等触发重排的属性；控制动画时长在 0.2-0.5s（过短不明显，过长拖沓）；避免同时对大量元素应用过渡（如列表项过多时可分批触发）。
