CSS Transition入门指南

前言

小编拿到实习offer，公司具体是做动画业务的，连忙前来学习css动画。

CSS Transition 入门指南

目录

1. [Transition 的作用](#Transition 的作用 "#1-transition-%E7%9A%84%E4%BD%9C%E7%94%A8")
2. 核心属性
3. 代码示例
4. 使用场景
5. 性能优化
6. 常见问题
7. 思维导图

---

1. Transition 的作用

CSS Transition 用于在 属性值变化时 创建平滑的过渡效果。例如：

• 鼠标悬停时按钮放大
• 元素颜色渐变切换
• 位置移动的缓动效果

---

2. 核心属性

属性	描述	默认值	示例值
transition-property	指定要过渡的属性	all	width, opacity
transition-duration	过渡持续时间	0s	0.3s, 500ms
transition-timing-function	速度曲线（缓动函数）	ease	linear, ease-in-out
transition-delay	过渡开始前的延迟	0s	0.2s
简写属性	transition: property duration timing-function delay;	-	transition: width 0.3s ease-in-out 0.1s;

---

3. 代码示例

基础示例：悬停放大按钮

<button class="btn">Hover Me</button>

<style>
.btn {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  transition: transform 0.3s ease;
}

.btn:hover {
  transform: scale(1.1); /* 触发过渡 */
}
</style>

多属性过渡

.box {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  transition: 
    width 0.5s ease-in-out,
    background 0.3s linear;
}

.box:hover {
  width: 200px;
  background: #2ecc71;
}

延迟触发

.element {
  opacity: 0.5;
  transition: opacity 0.4s ease 1s; /* 1秒后开始过渡 */
}

.element:hover {
  opacity: 1;
}

---

4. 使用场景

场景	示例
悬停效果	按钮放大、颜色渐变
表单交互	输入框聚焦时边框高亮
加载状态	进度条平滑填充
动态显示/隐藏	淡入淡出（结合 opacity 和 visibility）

---

5. 性能优化

• 优先使用 GPU 加速属性 ：

  /* 高性能 */
  transform: translateX(100px);
  opacity: 0.5;
  
  /* 低性能（触发重排） */
  margin-left: 100px;
  width: 200px;

• 避免过渡过多属性：同时过渡多个属性可能导致卡顿。

• 使用 will-change ：提示浏览器提前优化：

  .element {
    will-change: transform;
  }

---

6. 常见问题

Q1：过渡不生效？

• 检查是否设置了 transition-duration。
• 确保属性值变化（如通过 :hover 或 JavaScript 触发）。

Q2：如何实现阶跃动画？

使用 steps() 缓动函数：

transition-timing-function: steps(4, jump-end);

Q3：如何禁用过渡？

.element {
  transition: none;
}

---

7. 思维导图结构

CSS Transition
├── 作用
│   └── 平滑属性变化
├── 核心属性
│   ├── transition-property
│   ├── transition-duration
│   ├── transition-timing-function
│   ├── transition-delay
│   └── 简写语法
├── 缓动函数（easing）
│   ├── linear
│   ├── ease-in
│   ├── ease-out
│   └── cubic-bezier()
├── 使用场景
│   ├── 悬停效果
│   ├── 表单交互
│   └── 动态显示/隐藏
└── 性能优化
    ├── GPU 加速属性
    ├── 避免重排
    └── will-change

---

扩展练习

1. 实现一个卡片悬停时阴影加深并上移的效果。
2. 制作一个菜单栏，鼠标悬停时子菜单从顶部滑出。
3. 结合 JavaScript，在点击按钮时通过添加类名触发过渡。

---

资源推荐

• MDN Transition Docs
• CSS Transition Generator
• Cubic Bezier 缓动函数工具

---

后面还会陆续出动画的文章，关注一波，点赞！