资源描述：
《创建的css3动画》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。
1、创建CSS3动画Bounce.js是一个漂亮的关键帧动画生成工具和类库，基于CSS3实现。bouncejs.com提供的工具支持生成静态关键帧，不需要使用额外JavaScript代码，如果想在你的应用程序中动态生成这些代码，可以使用Bounce.js类库。安装可以通过Bower或者NPM安装：Shell3d1J1$bowerinstallbounce.js或者ShellJ1$npminstallbounce.js你可以从Github上浏览^下载所有的发行版本。使用方式要创建一个动画,可以实例化一个名为
2、Bounce的新对象:JavaScript3d1JIvarbounce=newBounce();首先使用Bounce对象缩放、旋转、平移和倾斜四种不同的组件来构建动画。这样既可以定义成已命名的动画供以后使用，或者直接在页面中使用这些元素。添加动画组件正如刚才所提到，你可以像使用Bounce.js工具那样调用scale（缩放）、rotate（旋转Xtranslate（平移）和skew（倾斜）方法创建自己的动画。所有的这些方法都接受一些共同选项，from和to参数定义了动画的起始点。请注意所有的这些方法都
3、是链式调用。scaleJavaScript<1」J1varbounce=newBounce();2bounce.scale({3from:{x:0.5,y:0.5},4to:{x:1,y:1}5})；from和to参数定义了元素缩放X（宽度）和Y（高度）的比率。上面的例子绘制了从半个到整个元素。动画rotateJavaScript3d1J1varbounce=newBounce();2bounce.rotate({3from:0,4to:905})；from和to参数定义了旋转的度数。以上例子将元素向
4、右旋转了90。。动画translateJavaScript1varbounce=newBounce();2bounce.translate({3from:{x:0,y:0),4to:{x:100,y:0}5})；from和to参数定义了在X方向和Y方向平移的像素。上面例子将元素向右移动100像素。动skewJavaScript4口1varbounce=newBounce();2bounce.skew({3from:{x:0,y:0},4to:{x:20,y:0}5})；from和to参数定义了元素在X
5、和Y轴的倾斜度。上面的例子中，动画的倾斜度为在横轴向上20。。动画常用动画参数所有方法都接受这些附加参数:•持续时间：动画在中的持续时间(ms)。默认为1000ms。•延迟:动画延迟时间(ms)。默认为0。•缓冲：像"bounce"、"sway"、"hardbounce"、"hardsway"。这些都是相同工具中的"缓冲"菜单。默认为"bounce"。•跳动：动画的劭渤次数。默认为4次。•刚度(stiffness):在动画中跳出的刚度值是在1到5之间。默认值是3。如何使用动画一旦创建了动画，可以选择把
6、它定义成名为关键帧动画，或者直接把它运用到DOM节点的任何一个元素。defined11Vvarbounce=newBounce();2bounce.rotate({3from:0,4to:905})；6bounce.define(Hmy-animationn);通过给定的名字来定义动画。可以在你的CSS动画参数中使用:my-animationIslinearboth;applyTo3d11varbounce=newBounce();2bounce.rotate({3from:0,4to:905})；6
7、bounce.applyTo(document.querySelectorAll(M.animation-target"));7//orwithjQuery:bounce.applyTo($(u.animatiotarget"));直接在单个或者元素列表中使用动画。这种方法可以接受许多参数：•循环:如果设置为true,则无限循环动画。默认是false.•移除：动画一旦完成就会被移除。如果你的动画结束于一个不同于之前的元素状态,那么该元素在一些浏览器中标返回它的原始状态。默认值为false.•完成度：动
8、画完成后运行一个回掉函数。如果你正在使用Jquery,方法将会返回一个允许你使用onComplete参数来替换：JavaScript3d11bounce.applyTo($(H-animation-targetn))2.then(function(){3console.log(nAnimationComplete”);4})；Remove即使动画定义了也可以手动移除：JavaScript<111bounce.remove()浏览器支持你可以通过如下方式来
