前言上一篇CSS3动画（一）transition，介绍了transition的用法。其中，transition包含四个可以设置的属性：有过渡效果的属性，过渡时长，过渡函数？在transitiondelay中，1、2、4很好理解，但是3是什么？其实3就是css3中的timing-function，3有两种取值方式：cubic-bezier(x1,y1,x2,y2):cubicBeziercurvesteps(number_of_steps,direction)本文总结了cubic-bezierbezier(x1,y1,x2,y2):cubicBeziercurveBeziercurve简介贝塞尔曲线(Beziercurve)是计算机图形学中的一种重要的参数化曲线，它通过一个方程来描述一条曲线。按方程的最高阶次可分为线性贝塞尔曲线、二次贝塞尔曲线、三次贝塞尔曲线和高阶贝塞尔曲线。css3中贝塞尔曲线扫盲使用的cubic-bezier()函数是三次贝塞尔曲线函数。三次贝塞尔曲线中的四个点，在cubic-bezier()中：第一个点p0(0,0)和最后一个点p3(1,1)分别是p1(x1,y1)和p2(x2,y2)在cubic-bezier()函数中作为参数传递。其中x∈[0,1]，y可以不在区间[0,1]内，但最大值不应大于1.5，最小值不应小于-0.50，1代表0%，100%cubic-bezier(x1,y1,x2,y2)接受的参数是p1(x1,h1)和p2(x2,y2)的坐标。那么我们如何得到我们想要的贝塞尔曲线呢？进入本站css3贝塞尔曲线的含义在上面的网站中，我们可以通过拖动p1和p2点来改变两点的坐标，从而生成一条曲线。那么这条曲线代表什么呢？横坐标：时间。时间是一个以恒定速率增长的纵坐标：进度。随着时间的增加，进度也会增加斜率：由于时间的关系，速度以恒定的速度增加，进度增加的快慢受斜率（速度）的影响。所以这是一条速度曲线，表示进度变化的速度。css中的这个progress其实是指样式改变前后的值。例如：width由100px变为200px，纵坐标起点为100px，终点为200pxopacity由0变为1，纵坐标起点为0，终点为1...过渡+cubic-bezier()实现平抛最终动画效果如下：https://codepen.io/reai3041/p...分析我们知道平抛运动可以分解为两个方向的运动:水平方向：匀速运动垂直方向：匀速匀速运动这样，我们可以将其分解为水平和垂直过渡效果：
