使用cubic-bezier()创建带有反弹特效的CSS动画
你知道吗，那些使用CSS transform属性添加进HTML的元素是可以实现动画效果的。我们可以使用transition属性和@keyframe动画来实现这个效果，但是 更炫酷的是，我们可以使用cubic-bezier()这个timing function，给动画添加一些反弹特效，从而让它看上去更好看。
简单来说，CSS中的cubic-bezier()，就是一个用来创建过渡效果的timing function。它可以定义过渡的速度和其他一些指标，它也可以用来创建动画中的反弹特效。
在这篇文章中，我们首先将会创建一个简单的变换动画，然后我们给它添加cubic-bezier()。在读完这篇文章之后，你将会了解如何创建一个同时使用了扇出效果和反弹特效的动画。
1. 制作扇叶
这个扇出效果是由5个扇叶所组成的。我们需要使用CSS的圆角（border-radius ）属性来制作这些扇叶。具体请参看下图：
圆角属性有很多种不同的语法。在这里我们将会使用一种比较复杂的语法：
border-radius: htl htr hbr hbl / vtl vtr vbr vbl; 在这个语法中，横向和纵向的半径被放在了一起；h和v分别代表了横向半径和纵向半径，t、l、b和r分别代表的是顶部（top）、左侧（left）、底部（bottom）和右侧（right）。例如，vbl代表的左下角的纵向半径。
如果你给横向或是纵向半径只设定了一个值，那么浏览器会将这个值复制到其他所有的横向或是纵向半径。
为了做出竖直的椭圆形状，你需要在所有角上让横向半径保持50%的比例，然后调节纵向半径，直到你获得了满意的形状。横向半径只会使用一个值：50%。
左上角和右上角上，纵向半径为30%，左下角和右下角上，纵向半径的值为70%。
HTML
<div class="pinStarLeaf"></div>CSS
.pinStarLeaf {
width: 60px;
height: 120px;
border-radius: 50%/30% 30% 70% 70%;
background-color: #B8F0F5;
}
2. 扩大扇叶数量
由于扇出效果需要5个扇叶，因此我们还需要再制作4个扇叶，并且为他们指定不同的颜色。除此之外，我们还需要指定一个绝对定位（absolute positioning），让5个扇叶在动画结束的时候重叠在一起。
HTML
<div id="pinStarWrapper">
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
</div>
CSS
#pinStarWrapper{
width: 300px;
height: 300px;
position: relative;
}
.pinStarLeaf{
width: 60px;
height: 120px;
position: absolute;
border-radius: 50%/30% 30% 70% 70% ;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
opacity: .5;
}
.pinStarLeaf:nth-of-type(1){
background-color: #B8F0F5;
}
.pinStarLeaf:nth-of-type(2){
background-color: #9CF3DC;
}
.pinStarLeaf:nth-of-type(3){
background-color: #94F3B0;
}
.pinStarLeaf:nth-of-type(4){
background-color: #D2F8A1;
}
.pinStarLeaf:nth-of-type(5){
background-color: #F3EDA2;
}
3. 识别用户点击行为，改进美学效果
我 们要使用#pinStarCenterChkBox这个识别符来添加一个checkbox，从而捕捉用户的点击行为。当checkbox被选中之后，扇出 效果会马上呈现（扇叶开始旋转）。我们还要用#pinStarCenter识别符来添加一个白色的原型，从而提升美学效果。这个原型要放在扇出效果的最中 心。
HTML
我们要先放置checkbox，然后是白色的圆和扇叶：
<div id="pinStarWrapper">
<input type="checkbox" id="pinStarCenterChkBox">
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div id="pinStarCenter"></div>
</div> CSS
#pinStarCenter, #pinStarCenterChkBox{
width: 45px;
height: 50px;
position: absolute;
left: 0;
right: 0;
top: -60px;
bottom: 0;
margin: auto;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
#pinStarCenter, .pinStarLeaf{
pointer-events: none;
}
#pinStarCenter > input[type="checkbox"]{
width: 100%;
height: 100%;
cursor: pointer;
} 由于每一个扇叶都要按照不同的角度沿z轴旋转，因此我们要为它们制定好过渡：rotatez();。我们还要给旋转特性应用transition属性。
#pinStarCenterChkBox:checked ~ .pinStarLeaf{
transition: transform 1s linear;
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(5){
transform: rotatez(35deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(4){
transform: rotatez(105deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(3){
transform: rotatez(180deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(2){
transform: rotatez(255deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(1){
transform: rotatez(325deg);
}仔细看看上面的CSS代码，你会发现#pinStarCenterChkBox:checked ~这个识别符，只有在checkbox被勾选之后（也就是用户点击之后），动画效果才会开始。
4. 对旋转的中心进行修改
默认情况下，旋转的中心位于旋转元素的中间。但是在我们的效果中，它应该位于所有扇叶的中心点，因此我们需要对其进行移动。我们可以使用CSS的transform-orgin属性来实现这个目的。
为了让旋转特效正常工作，我们要在CSS文件中的.pinStarLeaf选择器中添加下面两条规则：
.pinStarLeaf{
transform-origin: 30px 30px;
transition: transform 1s linear;
}截止到目前为止，旋转特效已经做出来了，但是这个动画还没有使用反弹特效。
现在我们来添加反弹特效，我们需要将现行的timing function替换为cubic-bezier()。
但是首先，为了更好的了解什么是反弹特效，我们先来试着了解一下cubic-bezier()这个timing function的工作方式。
cubic-bezier()的语法是这样的，d和t分别代表了距离（distance）和时间（time），他们的值通常是0到1之间的数字：
cubic-bezier (t1, d1, t2, d2)
虽然用距离和时间这样的词汇来解释CSS中的cubic-bezier()并不是非常精确，但是这样说的时候我们比较容易理解。
假设存在一个能在6秒内从A点移动到B点的盒子。我们使用下面的cubic-bezier()来实现这次过渡，令t1=0，d1=1。
/* t1 = 0 , d1 = 1, t2 = 0, d2 = 0 */
cubic-bezier(0,1,0,0)这个盒子会几乎立刻从A点移动到中间点，然后用剩下的时间在移动到B点。
现在我们令t1=1，d1=0，在来看看过渡的效果。
你会发现在最初的3秒内，盒子几乎不动，之后它几乎直接跳到了中间点，然后再稳步移动到B点。
你也许已经发现了，d1控制的是A点到中间点之间的距离，t1控制的是从A点到中间点所用的时间。
现在我们来添加d2和t2.令t1和d1的值都为1，令t2=2，d2=0。盒子会在前三秒内稳步过渡到中间点（因为t1=1，d1=1），然后立刻跳到B点。
现在我们来移除t2和d2的值。
盒子会在前三秒内稳步过渡到中间点（因为t1=1，d1=1），然后停止接近3秒的时间，之后立刻跳到B点。
也就是说，d2和t2分别控制了盒子从中间点到B点的距离和时间。
5. 使用Cubic-Bezier()添加反弹特效
在使用反弹特效的时候，最主要的参数就是以距离，也就是d1和d2。当d1的值小于1时，它会让盒子在想B点移动之前时，先退回到A点之前。
当d2的值大于1时，它会让盒子达到B点之后，再超越B点一段距离，然后再最终回到B点静止。我现在将会在代码中直接添加cubic-bezier()的值，这样你们就可以看到最终效果了。
#pinStarCenterChkBox:checked ~ .pinStarLeaf{
transition: transform 1s cubic-bezier(.8,-.5,.2,1.4);
}最终的效果如下，这就是用CSS制作带有反弹特效的扇出效果的方式：
为了让大家更好的了解反弹特效，我做了下面这个动画，请仔细观察盒子的移动轨迹：
