重新想，重新看——CSS3变形，过渡与动画①

学习CSS3，觉得最难记忆的部分除了flex特性之外，就要属变形，过渡和动画部分了。作为初学者，总有种犯懒的心理，想着既然IE8浏览器都不完全支持CSS动画属性，还要考虑浏览器兼容问题，那么就不那么着急学，一旦有需求使用JS勉强应付即可。但后来就渐渐觉得心慌，看大家都在争相谈论使用CSS3的动画，做出一个个惊艳的效果。觉得这种想法真是害人，哪有程序员不向前看而呆在自己的舒适圈里坐井观天呢？手机端H5页面各种在用CSS动画，网页也使用CSS动画大大提升了页面性能，减少了JS代码负担，提高了效率，实在是没有理由在自欺欺人的将这些新理由拒之门外，于是我便打算重新完整的学习一下CSS这些新的属性，将知识系统的整理一遍，并在这过程中将想到的一些问题，一些心得记录下来。

我学习的主要参考是大漠撰写的《图解CSS3核心技术与案例实战》一书，预计分为5个部分，第一个部分主要简单的谈谈自己对这些CSS3新属性的思考与理解，第二部分着重梳理CSS3变形属性的知识点，随后的两个部分依次对CSS3过渡、动画的知识点进行梳理，在最后一个部分中，我会将我实际运用CSS3变形、过渡、动画属性做出的效果进行展示，并对实际运用中产生的种种问题进行梳理和总结，自然，第一部分和最后一部分是会不断更新的，希望有朝一日我可以达到不再更新的程度。

以下是这一系列文章的一个大体的框架：

1. 对CSS3变形，过渡和动画属性的思考；
2. CSS3变形属性探讨；
3. CSS3过渡属性探讨；
4. CSS3动画属性探讨；
5. CSS变形，过渡和动画属性的实际应用与问题；

为了节约篇幅，就在此直接开始第一部分——对CSS3变形，过渡和动画属性的思考。

从整个知识体系而言，对于惯用CSS2的前端开发人员而言，CSS3的flex属性和本文介绍的变形，过渡，动画属性无疑是最陌生的，因此也造成了学习曲线较为陡峭，之所以之前对这些属性有点不上心除了浏览器兼容问题外，其实还是自以为动画用jQuery也可以完成，而且三个属性纠缠在一起一时很难分辨的清。但现在想来，这些偏见似乎都很有进一步思考的必要，思考清楚之后固本清源，似乎就能够对CSS3的这些新属性有一层更加深入的认识。

1.对变形，过渡，动画属性的认识

（1）变形属性

因为属性名为transform，因此中文翻译为"变形"，私以为比较贴切，属性的作用也可以顾名思义，用于改变元素的位置，大小和形状。变形属性我认为有四个特点：

• • ① 使用函数；
  • ② 主要服务于动画；
  • ③用于改变元素（盒子）的位置，大小和形状；
  • ④ 为元素建立了3D空间，使得元素拥有了变形的另外两个重要控制：远近和透视角度。至此，通过变形属性，我们可以对元素（盒子）进行更多的操控，元素的表现方式被大大扩展了。

学习的难点除了在于记忆各种变形函数的名称和使用方式外，还必须深刻理解元素在3D环境下的呈现方式，当然，还需要勤加练习方能熟而生巧。

（2）过渡属性

过渡属性名为transition，有"过渡，变换"之意，实际上的作用也是如此，其作用在于在指定的时间内，用指定的速率，将指定的元素属性的值从值A过渡为值B，同时，允许时间上的延迟。因此从作用上看，要使用过渡必须要有的条件有三个：同一属性的两个值，触发过渡，过渡的时间。过渡的本质大概在于"监听"，紧紧盯住某个元素属性值的变化，并在一定时间内反映出来。其实我认为过渡也属于一种动画，毕竟有"动"的成分在里面，但之所以还需要额外的一个"动画属性"则在于，过渡属性只能处理元素属性值从A到B的过程，而真正的动画往往需要多帧，即某属性值从A到B再到C的过程，这种情况显然是过渡属性无法处理的。

（3）动画属性

在前面也提到过，动画属性主要通过为元素属性添加"帧数"来实现动画效果，具体的实现方式将在之后谈及，这里就不再赘述。

2.关于结构、样式和行为的分离

从第一次接触前端技术就被反反复复灌输结构、样式和行为分离有多么政治正确，多么高效。因此在第一次接触CSS3这三个属性时就本能的产生疑惑，动画？这不是行为吗？那不是应该由JS来实现吗？为什么用CSS去做？特别是看到一些代码中使用CSS3+JS实现动画效果，这种疑惑就愈演愈烈了。

但是仔细一想，又觉得其实是自己走进了误区，没有本质上理解结构，样式和行为分离的含义，我们都知道HTML控制页面的结构和语义，CSS用来控制页面的样式，JS控制页面的行为，三者各司其职，因此在开发工程中彼此相对独立，维护起来会比较高效。但是，什么是样式？什么又是行为呢？我以为两者的分界线在于"交互"，那什么是交互呢？即页面需要用户的主动行为产生改变，而用户需要得到页面的反馈进行可能的下一步行为。因此不需要人与页面交互的属于样式，应该由CSS来实现，需要人与页面交互的则需要JS来完成。

这么看来，动画则完全应该隶属于不需要交互的"样式"范畴，理所应当由CSS实现。但是如果我们进一步思考，就会对以上提到的分类方法产生疑问，为什么分界要是"交互"呢，我是这样理解的，因为"交互"存在着不确定性，而一门程序语言的作用就是通过编程让机器处理各种不确定性的过程。因此对于HTML,CSS,JS这三门语言而言，唯有JS有这个能力处理这种不确定性，因此由JS负责交互的部分。这也就解释了为什么CSS中hover等属性含有"交互"色彩却未受太多争议的问题，因为hover太简单，太实用了，不具备不确定性。我想，未来的前端发展，一定是将越来越多可以通用的，简单的，成熟的效果推向CSS，以简化前端开发人员的开发压力，节约开发者的时间使其能够更多的考虑如何实现更好的交互效果。

以上。