css3-transition

1. transition （过渡）

transition 四个值依次是：

• transition-property: 规定应用过渡的 CSS 属性的名称。
• transition-duration: 定义过渡效果花费的时间。默认是 0。
• transition-timing-function: 规定过渡效果的时间曲线。默认是 “ease”。

linear 规定以相同速度开始至结束的过渡效果
ease: 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in: 规定以慢速开始的过渡效果
ease-out: 规定以慢速结束的过渡效果
ease-in-out: 规定以慢速开始和结束的过渡效果

transition-timing-function属性值是通过 cubic-bezier 绘制的

• transition-delay: 规定过渡效果何时开始，默认是0。

transition支持多个属性的设置：

transition: width 2s , height 1s;

2. cubic-bezier

cubic-bezier ( 第一个控制点，第二个控制点)；例如：cubic-bezier(0.3,0.6 ,0.8,-0.7)

贝塞尔曲线运动方程式：

p0代表起始点(0,0); p3代表结束点(1,1)；p1、p2分别代表两个控制点 。两个控制点的x轴取值范围只能是0至1之间。y轴可以小于0或者大于1。

transition: all 2s cubic-bezier(0,0,1,1)

控制台系统显示：

点击系统出现的图标，可以打开下图的工具（绘制想要的贝塞尔运动曲线）：

两个紫色球是两个控制点。头部是运动轨迹（运动速率、运动方向）