easingeffect反弹动画效果是比较常见的动画，比如小球的运动，使用反弹效果进行大小变化和角度变化可以提升动画体验。小脸介绍了一些带有缓动效果的简单动画。弹跳动画的实现CSS中所有的过渡和动画都与一条曲线（缓动曲线）有关，这条曲线规定了动画过程在整个时间内是如何推进的。在animationtiming-function/transition-timing-function的扩展属性中，默认的速度控制函数可以显式指定为ease关键字。ease也是默认值。四个指定的缓动曲线值分别是ease、ease-in、ease-out（ease-in是反向版本）、ease-in-out和linear。四种缓动曲线分别如下图所示：使用相反版本的ease-in和ease-out来实现回弹效果。比如小球的反弹效果可以这样实现：@keyframesbounce{60%,80%,to{transform:translateY(400px);动画计时功能：轻松；}70%{转换：translateY(300px);}90%{transform:translateY(360px);}}.ball{宽度：50px；高度：50px；边界半径：50px；背景：黄色；animation:bounce3sease-in;}CSS速度函数是只有一段的贝塞尔曲线，所以每个速度函数只有两个控制锚点。同时CSS提供了一个cubic-bezier(x1,y1,x2,y2)函数，可以让我们指定一个自定义的速度控制函数。它接受四个参数，分别代表两个控制锚点的坐标值。如果你想获得任何速度控制功能的反向版本，只需交换控制锚点的水平坐标和垂直坐标。将上述球的动画设置为反弹3scubic-bezier(.1,.25,1,.25);这将使反弹效果更加逼真。一个易于使用的贝塞尔曲线可视化工具。弹性过渡的应用场景，比如输入框。当用户输入时，给出一个提示框。你可以应用上面的cubic-bezier来实现input:not(:focus)+.callout1{transform:scale(0);过渡：.25s；}.callout1{/*cubic-bezier(.5s*50%,.1,.5*60%,1.5)*/transition:.5scubic-bezier(.25,.1,.3,1.5);变换原点：1.4em-.4em；/*CSStransform属性，只对块级元素有效*/display:block;宽度：250px；高度：40px；字体大小：12px；边框：1px实心#eee；margin-top:5px;}实现效果使用transition进行transition时，如果不指定transition-property属性，会自动读取其初始值all，此时可以做的all都会transition属性参与过渡，例如颜色。因此，在设置过渡时，需要将过渡的范围限制在某些特定的属性中。综上所述，上面代码中transition的值要加上transform，即input:not(:focus)+.callout{transform:scale(0);transition:.25stransform;}.callout{transform-origin:1.4em-.4em;transition:.5scubic-bezier(.25,.1,.3,1.5)transform;}逐帧动画用于实现卡通电影或复杂的进度指示框，或加载标志。更适合逐帧动画。实现加载动画时也可以使用GIF动画，但是GIF动画有一些缺点：GIF图像中可以使用的颜色数限制为256种颜色，GIF没有alpha透明的特性。修改动画参数不方便，需要重新编辑生成。你可以使用css中的step函数。所有基于贝塞尔曲线的油门函数都在关键帧之间进行插值以产生平滑的过渡。这种平滑特性不适合逐帧动画的实现。steps()会按照你指定的步数把整个动画分成多帧，整个动画在帧与帧之间硬切，不做任何插值处理。这个加载实现适合这个具体实现如下：
