Glittering's blog

Appearance

一、transition 是什么？ ​

transition 是 CSS3 提供的一种 属性过渡效果。 它能让属性的变化在一定时间内 平滑进行，而不是立刻跳变。

📌 简单理解： 从 “旧样式” → “新样式”，中间有一个平滑动画过程。

二、基本语法格式 ​

css
transition: property duration timing-function delay;
参数说明示例
property需要过渡的属性名（如 width、color）all 表示所有可动画属性
duration动画持续时间0.5s、200ms
timing-function速度曲线函数（控制动画节奏）ease、linear、ease-in
delay动画延迟时间0s、1s

🔹 示例 1：最简单的 hover 过渡 ​

:::demo [vanilla]

html
<html>
<div class="box"></div>
</html>
<style>
.box {
  width: 100px;
  height: 100px;
  background: #42b983;
  transition: all 0.5s ease;
}

.box:hover {
  width: 200px;
  background: #ff8c00;
}
</style>

:::

✅ 效果：

鼠标移入时，盒子宽度变宽、颜色渐变，整个过程持续 0.5 秒。

三、transition 的常用四个属性 ​

1️⃣ transition-property ​

指定哪些属性需要过渡。

css
transition-property: width, background-color;

如果写 all，表示所有可动画属性。

2️⃣ transition-duration ​

设置过渡时间。

css
transition-duration: 0.3s;

3️⃣ transition-timing-function ​

控制动画速度变化曲线。

值说明曲线特征
linear匀速——
ease默认值，缓慢开始和结束🚶‍♂️
ease-in慢进快出⤴️
ease-out快进慢出⤵️
ease-in-out慢进慢出↗️↘️
cubic-bezier(n, n, n, n)自定义贝塞尔曲线🎨

示例：

css
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

👉 在 https://cubic-bezier.com 上可以在线调节曲线。

4️⃣ transition-delay ​

设置延迟时间。

css
transition-delay: 0.2s;

🔹 示例 2：四个属性分别写法 ​

css
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 0.5s;

等价于👇

css
transition: width 1s ease-in-out 0.5s;

四、多个属性过渡写法 ​

css
transition:
  width 1s ease-in,
  height 0.5s linear,
  background-color 0.8s ease-out;

✅ 每个属性可以定义不同的时间与曲线。

五、常见应用场景 ​

场景示例
🎨 hover 交互按钮变色、图片放大
🧭 导航菜单鼠标悬停展开动画
📦 模态框出现/消失渐变效果
🔄 loading 动效与 transform 结合旋转、缩放

🔹 示例 3：按钮 hover 动画 ​

:::demo [vanilla]

html
<html>
<button class="btn">Hover Me</button>
</html>
<style>
.btn {
  padding: 10px 20px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 6px;
  transition: background-color 0.3s, transform 0.3s;
}

.btn:hover {
  background: #66b1ff;
  transform: scale(1.05);
}
</style>

:::

✅ 过渡更自然，有轻微放大效果。

六、过渡与 transform 配合使用（非常常见） ​

css
.card {
  transition: transform 0.5s ease;
}
.card:hover {
  transform: translateY(-10px) scale(1.05);
}

🎯 优点： transform 不会触发布局回流（reflow），性能更好。

七、性能优化建议 ​

建议原因
✅ 优先使用 transform、opacity不触发布局与重绘，性能最佳
❌ 避免过渡 width / height会导致回流
✅ 使用 will-change 提前优化通知浏览器提前准备动画层
✅ 简化过渡属性避免使用 transition: all

示例优化写法：

css
.box {
  transition: transform 0.3s ease;
  will-change: transform;
}

🧭 八、transition vs animation 对比 ​

对比项transitionanimation
触发方式状态变化（如 hover）可自动循环播放
是否需要触发条件需要不需要
控制复杂度简单高（支持关键帧）
适用场景简单过渡连续动画、复杂动效

💡 九、结构化总结（思维导图结构） ​

CSS3 Transition（过渡）
 ├── 定义：样式变化的平滑动画
 ├── 语法：transition: property duration timing delay;
 ├── 四个属性
 │   ├── transition-property
 │   ├── transition-duration
 │   ├── transition-timing-function
 │   └── transition-delay
 ├── timing-function 曲线
 │   ├── ease / linear / ease-in / ease-out / ease-in-out
 │   └── cubic-bezier()
 ├── 应用场景
 │   ├── hover 动效
 │   ├── 导航展开
 │   ├── 按钮放大
 │   └── 模态框渐变
 ├── 优化建议
 │   ├── 使用 transform / opacity
 │   ├── 避免 all
 │   ├── will-change 提前优化
 └── 与 animation 对比
     ├── 触发：transition需触发，animation自动
     ├── 复杂度：transition简单，animation强大

Copyright © 2026