开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第34天，点击查看活动详情

过渡(transition)

在传统的媒介上，都是静止不动的。在现在Web界面中，可以将元素淡出、菜单可以以各种效果点击或滑入滑出、各种背景色的变化从一种到另一种等，实现这些效果最简单最常用的方式就是过渡。

属性

过渡是通过一系列transition-*属性来实现的。如果某个属性设置了过渡，那从一个变量值到另一个变量值的话，不是只有初始两个状态，中间可以有无数个过渡状态。

transition接受4个参数：

• transition-property：过渡的属性，默认all
• transition-duration：从初始值到最终值需要持续的时间，必须带单位，默认0s
• transition-timing-function：定时函数，默认ease
• transition-delay: 延迟，默认0s

transition: background-color 0.3s linear 0.5s;

当然，transition属性不一定都要放到一个属性中，也可以拆开出来分别写，这样虽然每个属性值更清晰，但相比没那么简洁。

如果需要定义多个属性的过渡效果，那可以通过逗号来分割，如：

transition: margin-right 1s, color 2s;

这里就分别对margin-right和color两个属性加了过渡效果。

定时函数

transition-timing-function在属性中是第三个值，用来控制属性中间值变化的过程，在某段时间是加速还是减速。默认ease（先加速后又减速）。

除了ease外，还有ease-in（加速），ease-out（减速）、linear（匀速）等等非常多。

开发中工具，如图：以Chrome为例。提供了一系列预设的曲线。

曲线的两端都有一条短直线-控制柄（handles）,直线上有个小圆点-控制点；点击并拖动控制点可以改变曲线的形状。

类似这些有名称的定时函数，其实也就是预设了一些固定的参数而定义出来的。这些生成出来的曲线其实就是根据数学上的贝塞尔曲线来生成的。