2、CSS过渡动画：transition属性详解、过渡触发条件、过渡时间与缓动函数
CSS过渡，说白了就是让元素状态变化不那么突兀。从一个颜色跳到另一个颜色，从透明变到不透明——如果没有过渡，这些变化都是瞬间完成的，用户看着会觉得生硬。而transition就是给这些变化加一个「渐变过程」。
我刚开始做前端那会儿，觉得动画就得用JavaScript。后来才发现，很多简单的动效用CSS过渡就能搞定，而且性能更好、代码更少。你想想看，一个hover效果、一个菜单展开收起，这些场景用transition简直不要太合适。
2.1 transition属性拆解
transition是一个复合属性，它由四个子属性组成。我个人习惯把它们拆开写，这样可读性更好，也方便调试。
/* 完整写法 */
.element {
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
}
/* 简写形式（我推荐这种） */
.element {
transition: all 0.3s ease 0s;
}| 子属性 | 作用 | 常用值 |
|---|---|---|
transition-property |
指定哪些属性参与过渡 | all、opacity、transform、background-color |
transition-duration |
过渡持续的时间 | 0.3s、500ms、1.5s |
transition-timing-function |
过渡的速度曲线 | ease、linear、ease-in-out、cubic-bezier() |
transition-delay |
过渡开始前的等待时间 | 0s、0.2s、1s |
all，而是明确写出要过渡的属性。比如transition: opacity 0.3s ease, transform 0.3s ease。这样性能更好，也避免了一些意想不到的副作用。
2.2 过渡触发条件
过渡不会自己跑起来，它需要一个「触发器」。最常见的触发方式有这几种：
- 伪类触发：
:hover、:focus、:active、:checked - 类名切换：通过JavaScript添加或移除class
- 媒体查询：窗口尺寸变化时触发
- 内联样式变更：直接修改元素的style属性
举个例子，一个按钮的悬停效果：
.btn {
background-color: #3498db;
transform: scale(1);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn:hover {
background-color: #2980b9;
transform: scale(1.05);
}这里有个坑，我曾经踩过——不是所有CSS属性都能过渡。比如display就不行，background-image也不行。能过渡的属性，说白了就是那些有「中间值」的属性：数值、颜色、长度单位这些。
display: none到display: block无法过渡。如果你想让元素淡入淡出，可以用opacity配合visibility来实现。
2.3 过渡时间与缓动函数
过渡时间决定了动画快慢，缓动函数决定了动画的「节奏感」。这两者配合好了，动效才会自然。
过渡时间的选择
我一般遵循这个原则：
- 0.1s - 0.2s：微交互，比如按钮按下、开关切换
- 0.3s - 0.4s：最常见的过渡时长，菜单展开、弹窗出现
- 0.5s - 0.8s：页面切换、大元素移动
- 1s以上：慎用，除非是强调性的动画
为什么是0.3s？因为人眼的反应时间大概在0.1s到0.2s之间，太短了感觉不到，太长了会觉得拖沓。0.3s是个黄金平衡点。
缓动函数详解
缓动函数，说白了就是控制动画「先快后慢」还是「匀速前进」。CSS提供了几个预设值：
| 函数名 | 效果 | 适用场景 |
|---|---|---|
ease |
慢-快-慢 | 通用过渡，默认值 |
linear |
匀速 | 颜色变化、进度条 |
ease-in |
慢-快 | 元素进入场景 |
ease-out |
快-慢 | 元素离开场景 |
ease-in-out |
慢-快-慢 | 往返动画 |
cubic-bezier() |
自定义曲线 | 需要精确控制节奏 |
如果你觉得预设不够用，可以用cubic-bezier()自定义。比如我常用的一个「弹性效果」：
.element {
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}这个曲线会让元素在终点附近「弹」一下，效果很生动。我在做卡片翻转动画时经常用。
ease-out适合元素进入，ease-in适合元素离开。记住这个原则，你的动画就不会显得生硬。
2.4 知识体系总览
下面这张图把transition的核心知识点串起来了，你可以对照着看：
2.5 实战中的避坑指南
做过渡动画时，有几个坑我反复踩过，今天一并告诉你：
- 性能问题：尽量只过渡
transform和opacity，这两个属性不会触发重排。过渡width、height、margin这些属性，性能开销大，容易掉帧。 - 过渡冲突：如果一个元素同时有多个过渡，而且它们互相影响，可能会出现「闪烁」。我遇到过hover时背景色和边框同时变化，结果边框先变完背景色才跟上，看着很别扭。解决办法是把它们拆成独立的过渡，或者用
transition-delay错开时间。 - 移动端兼容：有些老设备对
cubic-bezier()支持不好。我一般会先写一个预设值做降级，再写自定义曲线。
cubic-bezier()都靠它。
嗯，transition的内容差不多就这些了。记住一个核心原则：过渡是为了让变化更自然，不是为了炫技。用得恰到好处，用户甚至不会注意到它的存在——这才是好的动画。