- 1、本文档共13页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
杨超 1 transition(过渡) 2 transform(变换) 3 animation(动画) 4 css3动画生成工具 5 css3动画库 transition(过渡) 1. transition-property 过渡的效果 CSS 属性的名称(width,height etc.) 2. transition-duration 完成过渡效果需要时间 3. transition-timing-function 过渡的速度曲线 4. transition-delay 过渡延迟 div{ -webkit-transition-property:width,height; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /*简写*/ -webkit-transition:width 1s linear 2s; } div:hover{ width:200px; height:200px; } transition-property: none|all|property; -webkit-transition:all 1s ease-in-out; btn{ background:red; -webkit-transition:all 1s ease-in-out; } btn:hover{background:black;} transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); linear 匀速运动 ease 慢速开始,然后变快,然后慢速结束 ease-in 慢速开始,然后变快 ease-out 先快后慢 ease-in-out 慢-快-慢 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 transform: none|transform-functions; 旋转(rotate),缩放(scale),位移(translate), etc. /*垂直居中*/ div{ position:absolute; top:50%;left:50%; -webkit-transform:translate(-50%,-50%) } /*硬件加速*/ -webkit-transform: translateZ(0); animation @keyframes 动画 @-webkit-keyframes a { 0%{} 100%{} from {} to {} } animation-name 规定 @keyframes 动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 animation-timing-function 规定动画的速度曲线。默认是 ease。 animation-delay 规定动画何时开始。默认是 0。 animation-iteration-count 规定动画被播放的次数。默认是 1。 n|infinite; animation-direction 规定动画是否在下一周期逆向地播放。默认是 normal。 normal|alternate; animation-play-state 规定动画是否正在运行或暂停。默认是 running。 paused|running; animation-fill-mode 规定对象动画时间之外的状态。 none | forwards | backwards | both; div{ background:red;width:100px;height:100px; -webkit-animation-name : changecolor ; -webkit-animation-duration:5s ; -webkit-animation-timing-function:ease; -webkit-animation-delay :3s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction:alternate; -webkit-animation:changecolor 5s ease infinite alternate; } @keyframes changecolor
您可能关注的文档
- CorelDRAW 快捷键全攻略.doc
- CORELDRAW-X4绘制卡通衣服1.ppt
- CorelDRAW_X4_快捷键牢记学习大全.doc
- 2012-8-9-金科王府之女人季活动方案.ppt
- core快捷大全.doc
- COPD与支气管哮喘辨.ppt
- CP1-CA2装配技能竞赛试题库.doc
- 2012ji 一轮复习——细胞呼吸.ppt
- CP1210029LQ定稿IP001-通过单个按钮模拟键盘输入序列的实现.doc
- 2012629583-DISC性格分析(培训用).ppt
- 2023学年诸暨中学高三年级第二学期3月第二次模拟考试(政治)公开课教案教学设计课件资料.docx
- 运动的合成与分解(二)公开课教案教学设计课件资料.pptx
- 近五年浙江省各地图形的翻折(轴对称)原题公开课教案教学设计课件资料.doc
- 如何做教师-2019-11-13-中关村一小相关公开课教案教学设计课件资料.pptx
- 生活中的圆周运动 (水平面)正式版公开课教案教学设计课件资料.pptx
- 专题10 条件概率与全概率公式公开课教案教学设计课件资料.docx
- 金华市东阳市2019学年第二学期期末测试卷公开课教案教学设计课件资料.doc
- 5 琥珀(第二课时)【慕课堂版】公开课教案教学设计课件资料.pptx
- 项目五 打印米老鼠模型公开课教案教学设计课件资料.ppt
- (打印版)9月25日地理周练公开课教案教学设计课件资料.docx
最近下载
- 校级家委会会议方案、流程和发言稿7篇汇编.doc
- 《工程材料及成形工艺基础》习题集与答案(材料部分).doc
- 婚前孕前保健服务技能考核试题及答案.docx VIP
- 《多彩的黄土高原(论文)3500字》.docx
- 家乡特产 (教学设计)-2023-2024学年五年级上册综合实践活动粤教版.docx
- 驾驶员安全礼仪培训.pptx
- 高素质农民人才培养方案+—+会计专业(农村会计方向)(高职).docx VIP
- 儿童精神药物应用(共40张PPT)【40页】.pptx
- TCAME 59-2023 医院消毒供应中心建设与运行管理标准.pdf
- SZSD03 0005—2024住房公积金基础数据安全分类分级指南.pdf
文档评论(0)