基础
语法：
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
相关属性 ：transition-property， transition-duration， transition-delay
取值：
- ease：
- ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
- linear：
- linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
- ease-in：
- ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
- ease-out：
- ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
- ease-in-out：
- ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- cubic-bezier：
- 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。（这个是真的吗？下面介绍）
说明：
此时间函数使用的是贝塞尔曲线。
在这里我主要是深入的理解cubic-bezier，根据里面 (x1, y1, x2, y2)可以画出这样的一个贝赛尔曲线，但是这条曲线是怎么看呢？ 可能有些刚接触的同学还是会比较难理解。
这条曲线就是代表变化过程的速率，Y轴就是代表变化过程的百分比，X轴代表时间的百分比，快慢就是通过看曲线在该点时间上的倾斜度，倾斜度越大变化越快。
动画技巧
最近想做一些缓冲的效果，然后重新试了一下这个贝赛尔，手册上说4个点必须在[0,1]内，不试白不试，我也不是一个听话的人。
然后测试了两个方案
cubic-bezier(-0.5,0.5, 1.5, 0.5)：（两个X的确是要再0-1范围内 不然transition失效）
cubic-bezier(0.5,-1, 0.5, 2)：（两个Y是可以不在0-1的范围内，最后得出缓冲效果）
<!doctype html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
}
#box {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
right: 0;
bottom: 0;
margin: auto;
background: red;
-webkit-transform: scale(1);
-webkit-transition: -webkit-transform 1s cubic-bezier(0.5, -1, 0.5, 2);
}
#box.change {
-webkit-transform: scale(2);
}
</style> </head>
<title>测试transition</title> <body>
<p>点击屏幕查看变化</p>
<div id="box"></div> </body>
<script>
var box = document.querySelector('#box');
document.querySelector('body').addEventListener("click", function() {
if (box.className) {
box.className = "";
} else {
box.className = "change";
}
}, false);
</script> </html>