1. What is transition?

transition is an property transition effect provided by CSS3. It allows attribute changes to occur smoothly within a certain period of time, rather than jumping immediately.

📌 Simple understanding: From "old style" → "new style", there is a smooth animation process in the middle.

2. Basic grammar format

transition: property duration timing-function delay;

Parameters	Description	Example
property	The name of the property that needs to be transitioned (such as width, color)	all means all animatable properties
duration	animation duration	0.5s, 200ms
timing-function	Speed curve function (control animation rhythm)	ease, linear, ease-in
delay	animation delay time	0s, 1s

🔹 Example 1: The simplest hover transition

:::demo [vanilla]

<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>

:::

✅ Effect:

When the mouse moves in, the width of the box becomes wider and the color gradually changes. The whole process lasts for 0.5 seconds.

3. Four commonly used attributes of transition

1️⃣ transition-property

Specify which properties need to be transitioned.

transition-property: width, background-color;

If you write all, it means all animatable properties.

2️⃣ transition-duration

Set transition time.

transition-duration: 0.3s;

3️⃣ transition-timing-function

Control the animation speed curve.

Value	Description	Curve Characteristics
linear	Uniform speed	——
ease	Default value, slow start and end	🚶‍♂️
ease-in	Slow in and fast out	⤴️
ease-out	Fast in and slow out	⤵️
ease-in-out	Slow in, slow out	↗️↘️
cubic-bezier(n, n, n, n)	Custom Bezier curve	🎨

Example:

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

👉 in https://cubic-bezier.com The curve can be adjusted online.

4️⃣ transition-delay

Set delay time.

transition-delay: 0.2s;

🔹 Example 2: How to write four attributes separately

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

Equivalent to 👇

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

4. Multiple attribute transition writing methods

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

✅ Each attribute can define different times and curves.

5. Common application scenarios

Scenario	Example
🎨 hover interaction	Button color change, picture zoom
🧭 Navigation menu	Mouse hover expansion animation
📦 Modal box	Appear/disappear gradient effect
🔄 loading animation	combined with transform to rotate and scale

🔹 Example 3: Button hover animation

:::demo [vanilla]

<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>

:::

✅ The transition is more natural and has a slight amplification effect.

6. Use transition with transform (very common)

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

🎯 Advantages: transform will not trigger layout reflow (reflow) and has better performance.

7. Performance optimization suggestions

Suggestions	Reasons
✅ Prioritize using transform, opacity	Does not trigger layout and redrawing, best performance
❌ Avoid transition width / height	can cause reflow
✅ Use will-change to optimize in advance	Notify the browser to prepare the animation layer in advance
✅ Simplify transition attributes	Avoid using transition: all

Example of optimized writing:

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

🧭 8. Transition vs animation comparison

Contrast items	transition	animation
Trigger method	Status change (such as hover)	Automatic loop playback
Whether trigger conditions are required	Required	Not required
Control complexity	Simple	High (supports key frames)
Applicable scenarios	Simple transition	Continuous animation, complex motion effects

💡 9. Structured summary (mind map structure)

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强大