css cubic-bezier,使用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

CSS

.pinStarLeaf {