Bounce.js是一款功能非常强大的可视化CSS动画代码生成插件。该插件提供了一个在线APP，通过该APP可以在可视化的条件下编辑CSS的各种动画效果，如移动、旋转、倾斜、easing等效果，编辑完成后可以直接获取该CSS帧动画的代码，复制代码带你的页面中即可在你的页面上获得与该动画一样的效果。此外，你也可以单独使用Bounce.js，通过js代码来完成各种CSS动画效果。Bounce.js能与jQuery完美结合。
安装可以通过Bower或NPM来安装Bounce.js。
bowerinstallbounce.jsnpminstallbounce.js
使用方法要使用bounce.js来创建CSS动画，首先要创建一个Bounce对象。
varbounce=newBounce();
制作CSS动画前必须先创建Bounce对象，然后使用该对象来添加各种动画组件：scale、rotate、translate和skew。你可以为CSS动画定义一个名称，或者直接在该对象上应用页面上的某个元素。
添加CSS动画组件scale如上面所说的，你要使用scale、rotate、translate或skew方法来创建动画。所用这些方法都接收一定数量的参数，如from和to参数定义动画元素的开始和结束位置。所用这些方法都是可以链式编程的。
varbounce=newBounce();bounce.scale({from:{x:0.5,y:0.5},to:{x:1,y:1}});
上面代码中的from和to参数定义了元素在X轴（宽度）和Y轴（高度）上的比例。这个例子使元素从50%的大小变化到%的大小。
rotatevarbounce=newBounce();bounce.rotate({from:0,to:90});
上面代码中的from和to参数定义了元素旋转的度数。
translatevarbounce=newBounce();bounce.translate({from:{x:0,y:0},to:{x:,y:0}});
上面代码中的from和to参数定义了元素在X轴和Y轴上移动的距离（单位像素）。上面的例子将元素向右移动像素。
skewvarbounce=newBounce();bounce.skew({from:{x:0,y:0},to:{x:0,y:0}});
上面代码中的from和to参数定义了元素在X轴和Y轴倾斜的度数。上面的例子在X轴上倾斜0度。
通用参数上面的所以方法都可以使用下面的参数：
duration：CSS动画的持续时间，单位毫秒，默认值0。delay：CSS动画的延迟时间，单位毫秒，默认值0。easing：easing效果。可选值有："bounce","sway","hardbounce","hardsway"，默认值为：bounce。bounces：Thenumberofbouncesintheanimation.Defaultsto4.stiffness：动画反弹的硬度。值必须在1-5之间，默认值。应用举例当你使用Bounce.js来制作CSS动画的时候，你可以选择创建帧动画，或者直接将动画应用到网页元素上。
definevarbounce=newBounce();bounce.rotate({from:0,to:90});bounce.define("my-animation");
通过给定的名称来定义一个CSS帧动画。你可以在CSS文件中使用animation:my-animation1slinearboth;来应用这个动画效果。
applyTovarbounce=newBounce();bounce.rotate({from:0,to:90});bounce.applyTo(document.querySelectorAll(".animation-target"));//orwithjQuery:bounce.applyTo((".animation-target"));
你也可以将动画效果直接应用到单个或一组元素上。使用这个方法还能接受下面的参数：
loop：如果该参数设置为true则动画无限循环。默认值为false。move：当动画结束后就移除该动画。如果动画的接受状态和开始状态不一样，那么元素在某些浏览器上会回到它的初始状态。默认值为false。onComplete：在动画结束后的回调函数。如果你使用jQuery，该方法将返回一个promise，它可以在的参数上使用：
bounce.applyTo((".animation-target")).then(function(){console.log("AnimationComplete");});
Remove你也可以手动移除一个Bounce动画。
bounce.move()
综合应用下面是一个综合应用的例子：
varbounce=newBounce();bounce.translate({from:{x:-00,y:0},to:{x:0,y:0},duration:,stiffness:4}).scale({from:{x:1,y:1},to:{x:0.1,y:.},easing:"sway",duration:,delay:65,stiffness:}).scale({from:{x:1,y:1},to:{x:,y:1},easing:"sway",duration:00,delay:0,}).applyTo(document.querySelectorAll(".animation-target"));
浏览器支持你可以通过下面的方法来检测当前的浏览器是否支持Bounce生成的CSS动画。
Bounce.isSupported()
Bounce动画库可以在所有支持Dtransforms和keyframeanimations的浏览器上工作。