CSS3动画简介以及动画库.docx

  1. 1、本文档共6页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
css3动画简介 从广义上来讲,css3动画可以分为两种。 过渡动画 第一种叫过渡(tran siti on )动画,就是从初始状态过渡到结束状态这个过程中所产生的动 画。所谓的状态就是指大小、位置、颜色、变形( transform )等等这些属性。css过渡只能定 义首和尾两个状态, 所以是最简单的一种动画。 要想使一个元素产生过渡动画, 首先要在这个元 素上用transition 属性定义动画的各种参数。可定义的参数有 tra nsitio n-property :规定对哪个属性进行过渡 tra nsiti on-duration :定义过渡的时间,默认是 0 tra nsitio n-timi ng-fun ction :定义过渡动画的缓动效果,如淡入、淡岀等,默认是 ease tra nsitio n-delay :规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是 0 div{ rcans 11foti-praperr: width; r 村宽度柱■亍」丄盘- tran3iticn-duration : 3s; 讨:戟寸间芮.?电-* tran siti on 属性上:transition-1imifunction : ease; F岀缰动敦果為乜旦耳昌虫/ transiticn-delay : 3m ■延迅:呻'后才卩堆1过逼百 tran siti on 属性上: 为了书写方便,也可以把这四个属性按照以上顺序简写在一个 訂目匸口; width [目:} 如果是使属性的默认值,则可以省略: div{ tranai Li cn: viidth 苫s; 1 1相当于: 如果想要同时过渡多个属性,可以用逗号隔开,如: div{ transiticn: wi 1th 3sr 3s, ta^k^r^nnd-cclcr } 使用transtion 属性只是规定了要如何去过渡, 要想让动画发生,还得要有元素状态的改变。 如何改变元素状态呢,当然就是在 css中给这个元素定义一个类(:hover等伪类也可以),这 个类描述的是过渡动画结束时元素的状态。 div( width: lOOpnr heighttLOCipx: bact^round-color: *000: ?元恚的' tEansitisn! width 3sr heigh-c 3b, ba to lot 3a; —工A. C 匸丛旦蔚言顼 … } div;hover{ widtti; 4QQex; belght:40apK; backgxtKiiul-cQL'or:tfCQ *过直结束时的状态"或肴说需更更別j二卜试匸" 这样,当我们把鼠标移动到 div上的时候,div的状态发生了变化,就能看到宽度从 100 到400,高度从100到400,背景颜色从黑到红的,过渡时间为 3秒的过渡效果了。 除了使用hover等系统提供的伪类外,我们也可以随意的定义自己的类,然后想要过渡时就通 过js把类加到元素上面: <SEyle> div( width: lOOpx: heijlix :130pr:: Lackffround-color: : ttanaitifin: width 3sr height 3s, bacJcgrenti!!- coler 3s; div.onf width:400px: heighti400px; back^r&und-color:tfOO; } <bc <divx/div> <scnpt> /*** 假设佟用"7 jquery***/ I & ("divTl HtiovertrunctionO f *C'div,)*adtlCla33(tan,); } r tunctiono { 6 (' d iv+, remuv^Cl&ss }); < /scri.pt> </bcdy> 关键帧动画 第二种叫做关键帧 (keyframes )动画。不同于第一种的过渡动画只能定义首尾两个状态, 关键帧动画可以定义多个状态, 或者用关键帧来说的话,过渡动画只能定义第一帧和最后一帧这 两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。 把动画绑定到元素上,我们可以使用 把动画绑定到元素上,我们可以使用 animation 属性。animation 属性有以下这些: @keyframes 来定义动画。具体格 @keyframes 来定义动画。具体格 @keyframes 动画名称{ 时间点{元素状态} 时间点{元素状态} } 例如: rair.e3 deoo ( 佰 [bactground: redrb width: 10Opx; lij^ width.: 12Crx 4'1^ {bac-k^Tcund: blue: width

您可能关注的文档

文档评论(0)

kunpeng1241 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档