可视化CSS3动画代码生成js库插件bounce js怎么用，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
Bounce.js是一款功能非常强大的可视化CSS3动画代码生成js库插件。该js库插件提供了一个在线APP，通过该APP可以在可视化的条件下编辑CSS3的各种动画效果，如移动、旋转、倾斜、easing等效果，编辑完成后可以直接获取该CSS3帧动画的代码，复制代码带你的页面中即可在你的页面上获得与该动画一样的效果。此外，你也可以单独使用Bounce.js，通过js代码来完成各种CSS3动画效果。Bounce.js能与jQuery完美结合。
Bounce.js安装
可以通过Bower或NPM来安装Bounce.js。
$bowerinstallbounce.js
#OR
$npminstallbounce.js
Bounce.js使用方法
要使用bounce.js来创建CSS3动画，首先要创建一个Bounce对象。
varbounce=newBounce();
制作CSS3动画前必须先创建Bounce对象，然后使用该对象来添加各种动画组件：scale、rotate、translate和skew。你可以为CSS3动画定义一个名称，或者直接在该对象上应用页面上的某个元素。
添加CSS3动画组件
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轴（高度）上scale的比例。这个例子使元素从50%的大小变化到100%的大小。
rotate
varbounce=newBounce();
bounce.rotate({
from:0,
to:90
});
上面代码中的from和to参数定义了元素旋转的度数。
总之，Bounce.js给大家简单的介绍了一些，希望大家多看看。
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
