CSS3timing-function

css

What the FUCK is animation-timing-function？

animation-timing-function是css animation的一个属性，用来描述动画在一个keyframe周期内动画开始阶段和动画结束阶段速度变化的快慢程度（速度的变化率），值由一个或几个timing-function组成。

timing-function

timing-function有两种表示方法，先说第一种，核心的cubic-bezier(x1,y1,x2,y2)贝塞尔函数，

请自行百度贝塞尔函数(sorry)。。。
(x1,y1)和(x2,y2)分别对应图中的P1和P2点，P0和P3对用动画的开始点和结束点。
移动P1点（x1，y1）时，曲线上P0点的弧度会发生变化，效果类似于Photoshop中钢笔工具画图工具，同理移动P2点(x2,y2)，曲线上P3点的弧度发生变化，这两点弧度的变化直接影响整个曲线的形状，请用Photoshop钢笔工具尝试或自行脑补。
曲线的弧度对应动画执行的变化程度，比如弧度大时，动画变化的就快，弧度小，动画变化的就慢（类似于高中物理加速度a的概念）。
而cubic-bezier(x1,y1,x2,y2)中正是定义了P1，P2这两个点的位置，通过这两点的位置来确定整个运动曲线的弧度，就是动画的变化的快慢。

对应图：

贝塞尔函数

比如我们想做一个小球类似左右撞击的往返动画，那么要求小球在最左和最右有一个弹的效果，其实就是要求在动画开始时和结束时小球的运动曲线（弧度）变大，如何变大，当然不只是多喝木瓜汤。拿开始时刻说，当P1的位置越靠近左上方，P0处弧度越大，拿结束时刻说，P2越靠近右下方，P3处弧度越大。即动画的开始和结束处小球速度变化快，有了弹的效果。

取值

由上图可知，X轴(横轴)没有赋值，且最大值为1，所以cubic-bezier()函数中的x1,x2取值区间为[0,1],而Y轴(纵轴)是没有[0,1]限制的，故y1,y2无限制。
当y1,y2超出[0,1]范围时，可产生bouncing effects.就是弹一下返回一小段然后再继续执行的效果，上码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
div {
animation-timing-function: cubic-bezier(0.1, 1.3, 1, -0.3); //看这儿的y1和y2
    animation-direction: alternate;
    animation-duration: 3s;
    animation-fill-mode: none;
    animation-iteration-count: infinite;
    animation-name: anim;
    animation-play-state: running;
    border: 1px solid red;
    height: 80px;
    position: relative;
    width: 80px;
    border-radius: 50%;
}
@keyframes anim {
0% {
    left: 0;
    top: 0;
}
100% {
    left: 550px;
    top: 0;
}
}

第二种是关键字表示，就是指定值的cubic-bezier()函数简写:

linear == cubic-bezier(0.0, 0.0, 1.0, 1.0)，匀速运动（高中物理既视感）:

贝塞尔函数

其余的关键字为了不占用过多github空间，请自行MDN

从某霸博客上偷了个不错的现成bezier函数,屌屌的。