我正在参与掘金创作者训练营第5期，点击了解活动详情
在完成样式设计的时候，比如我们不想让元素只有一种单一的样式，我们想让元素样式有个变化的过程，那么我们需要以某种方式从一个样式过渡到另一种样式。
CSS3 过渡就是是元素从一种样式逐渐过渡到另一种样式。
其语法如下所示：
transition: 指定属性 持续时间 速度曲线 开始时间;
它是一个复合属性，我们也可以如下分开使用这几个属性。
transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/
举例1
比如这样的结果：
我们在 div:hover 中，使用 transform: scale(2) 设置当鼠标放在 div 元素上时，元素会放大 1 倍。然后在 div:nth-child(2) 中，使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
最后使用 transtion 属性实现过渡的效果，其中 ease-in-out 是 transition-timing-function 属性的属性值。
所以对应css代码如下：
<head>
<style>
div {
margin-top: 40px;
margin-left: 40px;
width: 50px;
height: 50px;
background-color: #51adcf;
/*ease-in-out 慢速开始慢速结束*/
transition: transform 1s ease-in-out;
}
div:nth-child(2) {
transform: rotate(-60deg);
}
div:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
transition-timing-function 属性
transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表所示。
| 属性值 | 说明 |
|---|---|
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| steps(int,start 或者 end) | steps() 有两个参数，第一个为步长，其值必须为整数，第二个值为可选值，它有两个取值，分别是 start 和 end。 |
| step-start | 相当于 steps(1, start)。 |
| step-end | 相当于 steps(1, end)。 |
| cubic-bezier(n,n,n,n) | 规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
| initial | 规定使用默认值。 |
| inherit | 规定从父元素继承该属性值。 |
举例：用 steps 的方式将 div 元素分成四步，使元素的面积逐渐变成原来的 2 倍，当鼠标从元素上移开，又会以四步的形式将元素还原成原有的大小。
<head>
<style>
div {
width: 50px;
height: 50px;
margin: 50px;
background-color: cornflowerblue;
transition: transform 4s steps(4);
}
div:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
点击预览页面，实验效果如下：
那么对于过渡，我们还需要了解这些：
- 过渡开始时间=样式改变的时刻+过渡延迟时间；
- 过渡结束时间=过渡开始时间+过渡持续时间。
- 过渡起始值=过渡前的过渡属性值；
- 过渡结束值=过渡完成后的过渡属性值 。
- 过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值
