Transition of CSS3

Transition of CSS3

这个属性如果说是动画，其实有点不太准确，准确的来说是一个过渡，在以前也用过这个属性。

再说过渡，所谓过渡就是让变化显得不那么突兀，有一个渐变的过程。

当在一个元素上设置了transition属性，如果这个元素发生了状态变化，并且发生变化的这个属性支持过渡的话，就会以过渡的形式去改变状态。

transition-property

用来监听我们要监听哪个属性状态的改变，一般情况来说是用all。

transition-duration

是一个时间间隔的意思，单位是秒。

transition-timing-function

指定过渡动画的运动状态，速度可以渐变也可以匀速。

linear

线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。

ease

平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)。

ease-in

由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。

ease-out

由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)。

ease-in-out

由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。

transition-delay

这个属性是等多少秒之后开始过渡。

---

这些属性一般合起来写：

transition:all 1s linear 2s;

cubic-bezier

贝塞尔曲线。

这个曲线代表了随着时间的推移，运动距离的一个变化，这个曲线里，每一个点的斜率就是该点的速率，这个是给接下来的贝塞尔曲线做铺垫

贝塞尔曲线应用非常广，它描述的其实也是一个运动状态。

由于这个贝塞尔曲线比较难，所以系统给我们提供了一个可以手动拖拽的方式继而直接绘制出贝塞尔曲线的结果，省的拿笔算了。

在浏览器控制台我们可以调试到我们想要的效果之后，复制坐标到自己的代码里。