transform,transition,animation的混合使用——初探

栏目: CSS3 · 发布时间: 6年前

内容简介:transform,transition,animation的混合使用——初探

学习css3动画

css3动画这个对于我们前端攻城狮来说是个既熟悉又陌生的东东,前两年有好些个大牛都在研究使用它,但最近一段热度降了下来,可以说这个东东各大钟情于大的公司都有自己的一套解决使用方案,但我在网上苦苦的寻找,没有发现,可能是我不够用心。

但我今天想说的是如何制作自己的一套css3动画制作方案,可能是很多前端工程师梦寐以求的,我也不例外。做一套适合自己的行之有效的解决方案说前来容易,但真正的做起来发现还是有一定的难度的。

我们前端攻城狮的进阶之路一般是使用—>熟练使用—>模仿—>总结—>归纳。这是一个由浅入深的过程。

作为一个有一两年开发经验的web前端工程师来说,下一步的进阶之路(升职,加薪,迎娶白富美……)就是分析一些成熟的css3动画框架,在这之前你可能自己写了一些,或者模仿了一些案例,但我想这还不足以让你自己写一份适合自己的解决方案,你需要要更系统的研究一下(天赋异秉着不在此列)。我分析的框架有aimate.css, 易企秀(H5场景),fulpage.js框架,同时我也模仿layui,小米官网,iconfont等一些网站的动画效果,通过不断的模仿,归纳和总结收获良多。

css3动画真的很重要

css3作为新一代的层叠样式表技术,它新增的动画功能使web前端开发人员的眼前一亮,同时伴随着v8浏览器引擎的投入使用(使用的一些算法,使开发人员的js被解析的更快,更好),让我们前端攻城狮赶脚,前端开发又迎来了新的春天,spa(单页面应用)的应用和一些快速开发单页面应用的框架的出现,更是推动了前端开发的进步。尤其是vue.js和angualr.js应用让人大呼过瘾。

闲话少说,我们今天就谈谈有关css3动画制作的transform,transition,animation的使用与三者之间的搭配使用。

首先,我们先来说一说transform,说到transform,先来张图,这张图包含了transform的所有属性值,常用的有translate,scale,rotate,skew,还包括一个最近很多人尝试使用的perspective。

transform,transition,animation的混合使用——初探
tranform属性
transform,transition,animation的混合使用——初探
animation属性

补充:动画的帧属性@keyframes 它规定动画。

transform,transition,animation的混合使用——初探
过渡属性

css3动画的兼容性

animation:

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

transform2D:

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 需要前缀 -ms-。

transform3D:

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换(它只支持 [2D 转换]

transition:

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。

注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。

tranform, transition, animation 的混合使用分为以下几种情况:

1.transform的单独使用,
2.transition的单独使用,
3.animation的单独使用,
4.transfrom和transition的混合使用,
5.transform和animation的混合使用,
5.transition和animation的混合使用(不能组合)

对与第五种的使用情况来说,我的理解是不能混合使用,transition是声明一个关键帧关键帧的动画,它起到了润滑油的作用;animation是调用关键帧的动画。前者在css3动画中起到一个润管有的作用,后者就像flash动画一样,通过控制关键帧来动画的每一步的运行。

transition和animation的相似之处

他们都随着动画的执行而改变元素的属性

transition和animation的不同之处

1.transition动画的执行过程就是声明关键帧的过程,而animation动画的事先声明关键帧然后再调用关键帧

2.transition动画的执行需要有事件来驱动,而animation动画的执行不一定需要驱动,

结语

为了写css3动画系列的文章,我已经准备了很长的时间,一直在思考我应该怎么写,写些什么,还好总算有了一个结果,虽然有些地方词不达意,或者未能表达清楚自己的想法,因此不足之处还请各位看官多多包涵能,后续文章和案例,我会在稍后几个星期相继推出,敬请期待!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

交易系统

交易系统

武剑锋 / 上海人民出版社 / 2011-1 / 32.00元

《交易系统:更新与跨越》是中国第一部研究证券交易系统的专业著作,填补了这一领域的学术空白。既回顾和总结了系统规划、建设和上线过程中,技术管理、架构设计、应用调优、切换部署、运行维护等方面的经验和教训,也从较为宏观的角度描述了独具中国特色的交易技术支撑体系,特别是,通过分析其他资本市场交易系统的近年来发展历程和后续的技术发展规划,探索了未来业务创新和技术创新的大致框架和可能的模式。相信《交易系统:更......一起来看看 《交易系统》 这本书的介绍吧!

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具