css动画, css animation, transition, requestanimationframe

文章较长，头绪较乱，请在无聊时PC端浏览。

最近一两天一直在鼓捣css动画的内容，起因是最近在阅读css揭秘一书，内容质量确实值得初学者和初级开发者一看，作者为css组委会的一名成员，里面很多demo都从优化的角度去设置css。言归正传，昨天结束了书本的最后一张，css动画，在demo的实现过程中发现了很多有趣的css动画相关的知识点，于是现在也算是对css动画的一个总结。

写在前面
本文借鉴了很多blog与网站的经验与内容，一次性将启发比较大的网址都贴出来。

阮一峰 css动画知识点介绍(偏工具，入门)：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

js设置css animation：https://www.w3cplus.com/animation/controlling-css-animations-transitions-javascript.html

requestanimationframe 入门1：http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html

requestanimationframe 入门2：http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/

一个小总结：http://imweb.io/topic/5643850eed18cc424277050e

transition

与transform是两个级别的东西，transition中文为过渡，transform中文为变形，意味着变形无时间轴，但是transition有时间轴，如果这还理解不了就简单粗暴理解为transition可以包含transform吧。 transition一般可以满足最简单的放大缩小，但是复杂一点的实现会很复杂，他的弊端阮一峰老师总结的比较全。直接copy过来了

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

Animation

于是animation闪闪发光的登场了，重量级选手，中文名就是动画！很符合大家的预期。利用animation提供的可选参数可以实现复杂的动画，

1）多属性变化

2）无限循环

3）某一时刻停止，再次触发时从上一位置开始

4）N个关键帧(N个%而已)

5）定义结束时的状态

......

既然animation那么NB为什么还有requestanimationframe？

其实我也不知道，哈哈。最前面两篇介绍requestanimationframe的文章提供了答案。

1）animation和requestanimationframe的设置完全不同

2）requestanimationframe的动画可以更流畅，摘自requestanimationframe入门2：

内部是这么运作的：
浏览器（如页面）每次要洗澡（重绘），就会通知我(requestAnimationFrame)：小丸子，我要洗澡了，你可以跟我一起洗哦！

简单总结一下requestanimationframe的特点：

1）类似于settimeout来递归通过退出条件来执行动画，一个蛮经典的例子是requestanimationframe入门1里面的进度条demo。

2）正如上面第二条提到的，requestanimationframe是专门用来处理动画的，中文字面意思就是要求动画帧，多个高的一个要求，要求！动画！帧！要求按照帧执行动画，注定了是如丝般顺滑。

写到这里其实三种主要css动画的方式基本介绍完了。下面再扯点别的，为以后内部经验分享会打稿。

在不借助外界库的情况下，直接书写动画的方式大概有5种

1：直接更改属性例如display，或者：hover伪类，暂且称为一类动画，只是只有一帧，立即展现，生硬。

2：settimeout/interval利用js去间隔时间修改某个属性。性能肯定垃圾了，但把握好时间间隔，还是可以实现不少动画的

3：transition

4：animation

5：requestanimationframe

讲到这里其实应该明白了，前两种以后就不要使用了，请努力使用第5种去替代第2种。

最后记录几个易错点，也是踩到的坑。

1：你需要重新理解fixed属性了，并不一定是以整个屏幕为容器哦。

如果某个父元素设置了transform，可以去试试fixed的相较原点。

其实父元素设置了transform以后，子元素的position:relative/absolute/fixed都会重新基于此父元素

2： transform-origin：这个默认是元素的左上角，但是如果想实现两个元素围绕一个原点转圈，数学功底就要拿出来了，相信你一定可以解决掉的。

3： transition-timing-function与animation-timing-function都是高深的数学函数，匀速，回弹，加速，减速等效果都是通过这个时间函数来控制的。这个函数也不必去完全理解，可以在AI等矢量制图软件里面来按需调试。网上也有很多案例

4：steps属性。 animation有一个steps属性。  animation: 3s keyframesName inifinite steps(11)。 这个参数就制定了整个动画3秒内包含11帧，试想一下经典的需求是什么！

没错，是loading，如果loading有8个状态的gif图，完全可以将8个状态对应的小图拼成大png，然后设置steps(8)变化left。这样执行出来结果就不会有左右滑动的效果。

当然英文的等宽字体也可以实现typing的效果，每一帧width增加一个ch，右边的border的颜色也一直有黑>透明->黑就模仿出来了。

5：我知道你想问有gif为什么去拼png，我也知道你想问什么是ch。没关系。gif不可以设置背景透明度，且颜色位数不如png全啊，就是这么任性。其实实际生产中也不会这样用啦。 ch也是一个长度单位，与px，em，rem，vw，vh一样，兼容性也不错，ch表示一个字所代表的宽度，所以请使用等宽字体去模仿typing效果，否则每次打出的可能是半个字。。。。

最后放两个炫酷的css动画

Link1: http://lea.verou.me/css-4d/#intro

Link2: http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html

当然我也没完全理解透。哈哈，下回见