1. CSS3过渡（Transition）入门：让颜色变化不再生硬
大家好，我是你们的前端动画课讲师。今天咱们来聊聊CSS3过渡——Transition。说实话，这是我觉得最「性价比高」的一个动画特性。你不需要写任何JavaScript，几行CSS就能让页面「活」起来。
我记得刚入行那会儿，做鼠标悬停效果只会用:hover直接切换颜色。结果呢？颜色「啪」一下就变了，特别生硬。后来学了Transition，才明白什么叫「丝滑」。
1.1 过渡的核心：四个属性
CSS过渡说白了就是：当某个属性发生变化时，不是瞬间变，而是慢慢变。它由四个属性控制，我习惯把它们称为「过渡四件套」：
| 属性 | 作用 | 类比理解 |
|---|---|---|
transition-property |
指定哪些属性要过渡 | 「我要变什么」 |
transition-duration |
过渡持续多久 | 「变的过程花几秒」 |
transition-timing-function |
过渡的速度曲线 | 「怎么变——匀速还是先快后慢」 |
transition-delay |
延迟多久开始 | 「等一会儿再变」 |
1.2 transition-property：指定要过渡的属性
这个属性告诉浏览器：「嘿，你帮我盯着这些属性，它们一变你就给我做动画。」
可以写具体的属性名，比如background-color、width。也可以用all表示所有可过渡属性都监听。我个人建议：尽量别用all。为什么？
我曾经踩过这个坑：用all做过渡，结果页面里某个元素不小心变了z-index，也触发了过渡动画，导致视觉上卡了一下。所以，明确指定要过渡的属性，性能更好，也更可控。
/* 推荐写法：只监听背景色 */
transition-property: background-color;
/* 不推荐：监听所有属性 */
transition-property: all;1.3 transition-duration：控制过渡时长
这个最简单——动画持续多久。单位是秒（s）或毫秒（ms）。
/* 0.3秒完成过渡，手感最舒服 */
transition-duration: 0.3s;
/* 300毫秒，和上面等价 */
transition-duration: 300ms;你想想看，0.1s太快，用户还没反应过来就结束了。1s又太慢，像在等加载。我做过测试，0.2s~0.4s是大多数交互最舒服的区间。
1.4 transition-timing-function：速度曲线
这个属性决定了动画是「匀速跑」还是「先加速后减速」。常用的几个值：
ease：默认值，先快后慢，最自然linear：匀速，适合机械感强的效果ease-in：慢速开始，逐渐加速ease-out：快速开始，逐渐减速ease-in-out：两头慢中间快cubic-bezier(n,n,n,n)：自定义曲线
我的经验：鼠标悬停效果用ease或ease-out最舒服。因为用户希望看到变化「快速响应，优雅结束」。而linear用在进度条、加载动画上更合适。
/* 鼠标悬停，我习惯用 ease-out */
transition-timing-function: ease-out;
/* 自定义贝塞尔曲线，更细腻的控制 */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);1.5 transition-delay：延迟启动
这个属性用得相对少，但某些场景很妙。比如鼠标移入时立刻变色，移出时延迟0.2秒再变回去——这样用户快速划过时不会看到「闪一下」的尴尬。
/* 鼠标移入时立即开始，移出时延迟0.2秒 */
transition-delay: 0s; /* 默认无延迟 */
transition-delay: 0.2s; /* 延迟0.2秒 */小技巧：你可以给:hover和默认状态设置不同的transition-delay。比如默认状态延迟0.2s，hover状态延迟0s。这样鼠标移入立刻响应，移出时慢慢恢复，体验特别好。
1.6 实战：鼠标悬停平滑颜色变化
好了，理论说完了，咱们直接上手。下面这个例子，实现一个按钮，鼠标悬停时背景色从蓝色平滑过渡到红色。
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
padding: 12px 24px;
background-color: #3498db;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
/* 过渡四件套 */
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-out;
transition-delay: 0s;
}
.btn:hover {
background-color: #e74c3c;
}
</style>
</head>
<body>
<button class="btn">悬停我试试</button>
</body>
</html>这段代码里，我用了transition-property: background-color，只监听背景色变化。0.3秒的时长，配合ease-out曲线，鼠标移上去时颜色变化很自然，不会「突突」的。
1.7 简写形式：一行搞定
四个属性写四行有点啰嗦。CSS提供了简写语法，顺序是：property duration timing-function delay。
/* 简写：一行顶四行 */
transition: background-color 0.3s ease-out 0s;
/* 如果不需要延迟，可以省略最后一项 */
transition: background-color 0.3s ease-out;注意：简写时，duration是必填的，而且必须写在delay前面。浏览器会根据数值类型自动区分——第一个时间值当作duration，第二个当作delay。
1.8 避坑指南
最后分享几个我踩过的坑：
- 不是所有属性都能过渡：比如
display就不行。想实现显示/隐藏的过渡效果，可以用opacity配合visibility。 - 过渡需要「起点」和「终点」：如果初始值没设置，浏览器不知道从哪开始变，过渡就不会生效。
- 性能问题：尽量过渡
transform和opacity，这两个属性GPU加速效果好。过渡width、height会触发重排，性能差一些。
嗯，这一章的内容就到这里。记住一句话：过渡不是魔法，它只是让变化「慢下来」。下一章咱们会深入transition-timing-function的贝塞尔曲线，让你能精确控制动画的「节奏感」。
公众号:蓝海资料掘金营，微信deep3321