- 1、本文档共6页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 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
您可能关注的文档
- 090416242821_004施工期间交通组织设计3份,横穿石峰岩路,封面单位名称上方盖章及骑缝章.docx
- 13307回风顺槽规程.docx
- 20091102认证中心颁布的GMP审计模版药品GMP企业内部审计(自检)模版.docx
- 20160815(B#仓库预应力管桩试打桩会议纪要)前场铁路大型货场物流园区(一期)项目启动工程.docx
- 20160926-D#仓库锤击桩试打桩20160926会议纪要及试桩记录.docx
- 20161011-D#仓库静压管桩试打桩会议纪要.docx
- 20170314-配套综合楼地基与基础分部验收会议纪要.docx
- 20170517-C#主体结构--主体结构分部验收会议纪要.docx
- 20170710-公厕--主体结构分部验收会议纪要.docx
- 20191214李冠杰老师的课(全).docx
- 地理-内蒙古锡林郭勒盟2023~2024学年第一学期高三年级全盟统考试题和答案.docx
- 历史|湖北元月调考暨湖北省部分市州元月高三期末联考历史试卷及答案.docx
- 历史-内蒙古锡林郭勒盟2023~2024学年第一学期高三年级全盟统考试题和答案.docx
- 数学(理科)-内蒙古锡林郭勒盟2023~2024学年第一学期高三年级全盟统考试题和答案.docx
- 历史丨金太阳24~239C湖北省十堰市2024届高三上学期1月调研考试历史试卷及答案.docx
- 青岛某高层办公楼地下防水施工方案(sbs卷材).docx
- 土木工程实习报告表格.doc
- 工程流体力学教学课件ppt作者闻建龙工程流体力学习题答案部分.doc
- 围手术期管理制度(1)_0.doc
- 2023年公务员多省联考《申论》题(内蒙古旗县卷)及参考答案.doc
文档评论(0)