@keyframes anix {
0% {top: 0}
100% {top: 200px}
}
@keyframes aniy {
0% {left: 0}
100% {left: 100px}
}
CSS动画中使用的是三阶曲线，如下图所示，三阶曲线共有P0,P1,P2,P3四个节点，其中P0是起点、P3是终点，P1和P2是控制点。同时CSS中使用的曲线，有些特殊，它固定了起点P0(0,0)和终点P3(1,1)，仅有控制点可以移动。移动控制点可以改变曲线的曲率(弯曲的程度)，通过曲率的变化反映出速率的变化，应用于动画之中。之后我们来看下曲率对应速率变化的规律。X轴和Y轴，我们理解为时间轴和距离变化轴，那么单位时间内，距离变化的多少，反应出来的就是速度的快慢。
下图中，X轴的切分是均等的，同时虚线矩形内，x1对应的y1、x2对应的y2，也是相等的，那么认为起点到终点是匀速变化的。
下图中，X轴的切分是均等的，同时虚线矩形内，x1对应的y1 大于 x2对应的y2，那么认为起点到终点的运动过程中，速度是先快后慢的。
这两种曲线反应到具体的动画之中的效果如下。
CSS动画中，使用贝塞尔曲线作为值的属性有两个，transition-timing-function，animation-timing-function，格式为cubic-bezier(P1x,P1y,P2x,P2y)，实际应用中的代码实例 transition: all 3.0s cubic-bezier(0.75, 0.25, 0.25, 0.75)。
可能你大多看到的是，ease,linear,ease-in-out 这样的属性值，其实它们也是贝塞尔曲线值，只不过是官方预定义的，以简化明了的名称，替代了复杂的数值书写方式。
以下是一些预定义名称对应的曲线值：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
css3不能完全按照正弦曲线来做运动的轨迹，但可以模拟，比如曲线上的几个点是(0,0),(1,1),(2,0),(3,1),(4,0),(5,1),动画逻辑如下：@keyframes myanimate
{
0% {left: 0top: 0}
20% {left: 1top: 1}
40% {left: 2top: 0}
60% {left: 3top: 1}
80% {left: 4top: 0}
100% {left: 5top: 1}
}
