一,css3 animation动画前言
随着现在浏览器对css3的兼容性越来越好，使用css3动画来制作动画的例子也越来越广泛，也随着而来带来了许多的问题值得我们能思考。css3动画如何让物体运动更顺畅，css3动画如何做弧线动画，css3动画是否有动画库，css3帧动画如何快速简单…… 为了解决这些折磨人的问题，我们今天来分析一下:
首先介绍css3 Animation动画库：
http://daneden.github.io/animate.css/
基本涵盖了我们常见的基础css3动画，有时做css3动画没有灵感或者需要快速制作时，我们可以套用里面的css3帧动画，简单粗暴。
http://leaverou.github.io/animatable/ 这个是github玩家写的一个常用的hover animation动画
css3 Animation在线调节工具：
http://melonh.com/animationGenerator/ 基于chrome的插件，可以快速调节页面上的动画
http://isux.tencent.com/css3/tools.html 腾讯isux一款非常强大的动画工具
http://tid.tenpay.com/labs/css3_keyframes_calculator.html 财付通的帧动画调节工具
自定义transition-timing-function中的cubic-bezier参数:
http://matthewlein.com/ceaser/
二,css3 animation动画技巧
1.animation-direction让动画变得更圆滑：
animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
语法：
animation-direction: normal|alternate;
| 值 | 描述 | 测试 |
|---|---|---|
| normal | 默认值。动画应该正常播放。 | 测试 |
| alternate | 动画应该轮流反向播放。 | 测试 |
animation-direction 值是 "alternate"属性实现双向循环的效果，可以很好的优化，我们本身用animation帧写的双向循环，原因在于浏览器自动实现的双向循环，比人为手工要好的多。
2.animation-fill-mode动画结束和开始时设置保持的动画：
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见，主要用来实现，我们动画结束和开始时我们想保留的状态。
语法
animation-fill-mode : none | forwards | backwards | both;
| 值 | 描述 |
|---|---|
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |
3.0%用from代表，100%用to，设置cubic-bezier出现的问题：
这里面，给大家区分一个误区，通常我们写动画是这样的:
@keyframes rotate{ 0%{transform:rotate(60deg)} 100%{transform:rotate(60deg)} } @keyframes rotate{ from{transform:rotate(50deg)} to{transform:rotate(100deg)} }
看看这两者的区别
可能对很多人来说，认为这种中0%可以用from，100%可以用to，两者是等价的，其实我然，当我们设置cubic-bezier，就会发现问题，有些手机的元素显示不出来。
@keyframes rotate{ 0%,100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0%{transform:rotate(60deg)} 100%{transform:rotate(60deg)} } @keyframes rotate{ 0%,100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } form{transform:rotate(50deg)} to{transform:rotate(100deg)} }
这两者真的是不能全等， 已经踩过很多坑了。
4.动画原则：
这里有点要注意的是，我们做动画的元素，请尽量使用绝对定位，从而避免重绘重排的问题。
这里推荐几个做动画的原则：
动画十四原则: http://www.sunnyzhen.com/course/animation_principles/demo.html
动画十二原则：http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool
5.图片雪碧图导致动画问题：
如果单张雪碧图面积实在太大，可以拆分雪碧图，例如拆分成2-4张，因为现代浏览器都支持4-6个同源请求下载，若资源实在太多，也可以考虑把静态资源放在不同源域名下去请求，这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好，当然，这需要具体情况去衡量。
还有一点就是我们做动画是总想把图片都集中在一直图片，结果导致图片高度过高，超过3000px，就会导致在部分手机图片失真或者是看不到等现象。
现在，也越来越多的伙伴用rem来处理移动端，实现缩放的问题，建议做雪碧图时要增加空隙，最好的空隙是除以4还是整数。
6.base64位使用时注意事项：
使用base64:URL的优缺点
base64:URL传输图片文件的好处在于：
减少了HTTP请求
某些文件可以避免跨域的问题
没有图片更新要重新上传，还要清理缓存的问题
不足在于：
浏览器支持使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的（IE9浏览器IE7模式下支持。对于目前PC页面，兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。
增加了CSS文件的尺寸base64编码图片本质上是将图片的二进制大小以一些字母的形式展示，例如一个1024字节的图片，base64编码后至少1024个字符，这个大小会被完全嵌入到CSS文件中（不过幸运的是也可以被gzip了，而图片文件被gzip效果不明显）。
编码成本图片完成后还需要base64编码，目前估计手工完成的多，因此，增加了一定的工作量，虽然不多。
图片这里还有一点要注意，移动端，我们经常做图片加载器，然后样式里面我们也有图片还有时间戳，这里我们一定要保持时间戳一直，不然会严重导致加载时间变长，因为不同的时间戳，会导致再次去请求确认浪费时间。
优缺点权衡下的实际应用价值
权衡上面所展示的优缺点，貌似base64:URL图片没有什么用武之地啊，实际上非也，有一种情况时有base64编码作为background-image背景图片利要远大于弊的。何种情况呢？
在web页面制作的时候，由于某些现实原因，我们可以会用到下面这一类图片：
这类图片不能与其他图片以CSS Sprite的形式存在，只能独行
这类图片从诞生之日起，基本上很少被更新
这类图片的实际尺寸很小
这类图片在网站中大规模使用
还有一点比较重要，就是就是不用这样合并写带有base64位图片background:url(base64:sdfsdfsd ) center center /20px 20px no-repeat;，这样会导致安卓机无法显示，这种情况可能很多时候在压缩的时候出现。
这里再说一个移动端border-radius的bug，通常我们画圆用border-radius：50%； 但我发现在低版本手机里面的qq浏览器不支持，只支持具体的数值px
推荐腾讯isux的两篇文章:
http://isux.tencent.com/play-with-html5-animate.html
http://isux.tencent.com/play-with-html5-optimize.html
CSS3的calc()使用 http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html