bounce.js：创建有趣的CSS3动画

Bounce.js 是一个漂亮的关键帧动画生成工具和类库，基于CSS3实现。bouncejs.com提供的工具支持生成静态关键帧，不需要使用额外JavaScript代码，如果想在你的应用程序中动态生成这些代码，可以使用Bounce.js类库。

安装

可以通过Bower或者NPM安装：
Shell

1	$ bower install bounce.js

或者
Shell

1	$ npm install bounce.js

你可以从Github上浏览和下载所有的发行版本。

使用方式

要创建一个动画，可以实例化一个名为Bounce的新对象：
JavaScript

1	var bounce = new Bounce();

首先使用Bounce对象缩放、旋转、平移和倾斜四种不同的组件来构建动画。这样既可以定义成已命名的动画供以后使用，或者直接在页面中使用这些元素。

添加动画组件

正如刚才所提到，你可以像使用Bounce.js工具那样调用scale（缩放）、rotate（旋转）、translate（平移）和skew（倾斜）方法创建自己的动画。所有的这些方法都接受一些共同选项，from和to参数定义了动画的起始点。请注意所有的这些方法都是链式调用。

scale

JavaScript

1 2 3 4 5

var bounce = new Bounce(); bounce.scale({ from: { x: 0.5, y: 0.5 }, to: { x: 1, y: 1 } });

from和to参数定义了元素缩放X（宽度）和Y（高度）的比率。上面的例子绘制了从半个到整个元素。动画

rotate

JavaScript

1 2 3 4 5

var bounce = new Bounce(); bounce.rotate({ from: 0, to: 90 });

from和to参数定义了旋转的度数。以上例子将元素向右旋转了90°。动画

translate

JavaScript

1 2 3 4 5

var bounce = new Bounce(); bounce.translate({ from: { x: 0, y: 0 }, to: { x: 100, y: 0 } });

from和to参数定义了在X方向和Y方向平移的像素。上面例子将元素向右移动100像素。动画

skew

JavaScript

1 2 3 4 5

var bounce = new Bounce(); bounce.skew({ from: { x: 0, y: 0 }, to: { x: 20, y: 0 } });

from和to参数定义了元素在X和Y轴的倾斜度。上面的例子中，动画的倾斜度为在横轴向上20°。动画