抱歉，您的浏览器无法访问本站

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

前言

本文主要内容：

• 过渡：transition

• 2D 转换 transform

• 3D 转换 transform

• 动画：animation

过渡：transition

transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

• 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。

• 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

参考链接：补间动画基础

transition 包括以下属性：

• transition-property: all; 如果希望所有的属性都发生过渡，就使用all。

• transition-duration: 1s; 过渡的持续时间。

• transition-timing-function: linear; 运动曲线。属性值可以是：

  • linear 线性
  • ease 减速
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速

• transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。

上面的四个属性也可以写成综合属性：

1
2
3

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;

transition: all 3s linear 0s;

其中，transition-property这个属性是尤其需要注意的，不同的属性值有不同的现象。我们来示范一下。

如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。效果如下：

如果设置 transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。效果如下：

案例：小米商品详情

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72