/ 写在最前
随着浏览器对CSS3动画的支持越来越好（IE除外，IE10用户量还非常的少），以前很多只能用flash或者javascript实现的动画效果，现在用CSS3动画也能部分的实现了。作为一个前端攻城狮，我们有足够的理由去使用CSS3动画让用户有更好的体验。
在使用CSS3动画设计构思前，我们须改变所有的浏览器都保持一致的思想，在不支持CSS3动画的主流浏览器里面保持最基本的功能体验，让支持CSS3动画的浏览器给用户提供更优的用户体验。
QQ音乐上周发布的QQ音乐年末回馈，全民领福袋的
活动需求中，有习惯使用chrome等非IE浏览器的同学会发现一些好玩的效果，像《逆世界》电影一样，福袋里的礼品像失重般飞出来，贴在顶上，这是
ecd同学利用CSS3动画设计的小创意。类似的效果，在很多的项目中都会出现，相信以后也会越来越多。更多的项目初试水如：
http://y.qq.com/vip/promote_yearvip/
http://y.qq.com/vip/levelUp/
/ 写在前
“起初，神创造天地。”
CSS3的出现已让web从业者兴奋了好久，但因兼容性的关系，应用面相对较窄，当然，也有不少的项目都有它的渗入，特别是在mac及移动终端领域。
好几个月前，我们在一个伟大项目中大肆使用CSS3及其更深入的动画属性，来替代古老年代需要JS来完成的选择和效果，给用户更冲“鸡”、更舒心的体验。
“地是空虚混沌，渊面黑暗，神的灵运行在水面上。”
ecd的小灰灰看着大伙桌面上堆积成山的各种资料，喃喃地说，做个网站吧，把我们用过的这些属性整合起来，方便我们自己查阅，如果可以，也分享出来，方便广大劳动人民。
“神说、要有光、就有了光。”
大伙抬起头，露出诡异的笑容表示认同，并表示是应该有这么个利器来帮助人类工业复兴。于是他挽起裤管，提起脚丫夹起那双人字拖一脚踩在转椅 上，N++分钟后，框架出来了。然来大伙坐下来讨论、需求分析、分工、输出计划deadline，经过团队全员业余长时间参与资料的整理、验证与校对，良 好的阅读版面设计，资料手册有了一个比较完整的原型。
“神看光是好的、就把光暗分开了。”
资料整合后经过体验发现，资料整理成的手册混入过多的DEMO不合适，这些动画属性参数DEMO应有个地方来存放，让资料查阅和动画属性参数 DEMO都有各自的窝。同时，过多的“算法”和数学及校式属性的组合使用，会让很多人抓狂。于是增加了一个工具，可以在线设计动画、调试预览或调用集成库 输出合适自己需要的CSS3动画代码，来满足另一部份不仅仅停留于查阅资料的诉求。
“神说、天上要有光体、可以分昼夜、作记号、定节令、日子、年岁。”
经过对目标用户的使用习惯与诉求采样分析，动画工具经过多次讨论后确认采用左右结构，左侧是三个TAB切换，可设计“变形过渡”、“自定义动画”与“预设动画库”，右侧是效果预览区，方便即时检验动画的预期。
设计面板提供三种模式的混合：设置条拖动智能调整大概数值，手工输入数值精确调整，预设效果与贝塞尔曲线混合，更多的操作发现可在体验中获得。
右侧预览区域，可把本机图片拖动到区域内替换默认图片，以获得更接近的动画效果。
在“自定义动画”设置时，右侧下面还提供一个时间轴动画层集合的调试区域（如上图），可在关键帧设置其时间位置与数值，或删除关键帧。
“神称光为昼、称暗为夜．有晚上、有早晨、这是头一日。”
经过内部多天的体验使用发现，有了资料手册和工具，不能没有成品的品鉴，应该全民参与提交的一个案例集合，世间有取有予，才最和谐。网站第三块内容“案例分享”也就出现了。
“并要发光在天空、普照在地上。事就这样成了。”
所有的功能特性都集合完毕，最后到整妆阶段，得有皮，是的，万物生长靠太阳，再牛X的东东也需要包装。
达人同学经过一周末的操刀画皮，并为此设计了一个野蜂飞舞的LOGO，大伙堆在一起整合优化，体验并修改细节和BUG，经过多个日夜的奋斗。
就这么成了，就这么成了。
「CSS3动画参考」名字暂定，如您有更性感的名字，请告知我们。由 ecd 数字音乐设计中心 利用业余时间整理/设计/研发输出，并在实际工作中得到验证，争取呈现的是一份详细严谨的资料。
感谢ecd本项目团队huihui、darren、mousa、williams、bryan、hugo、rock、pufen倾情辛苦奉献和广大业界知识份子的支持与鞭策，“神的光要照着我们！”
该工具使用HTMl5 & CSSS3设计开发，我们十分建议您使用Chrome、Safari、Firefox等浏览器进行访问使用。
在使用过程中有疑问或错误纠正，请在本贴留言。
/ 再写一点
1.「案例分享」里的网站来源于网友提交并审核通过，我们采用外链的方式集合，版权归原作者所有。如果出现类似404或503的马赛克，与我们无关；
2.「动画手册」的资料来自于互联网，经团队翻译、整理、纠正、验证，修订成册，如遇资料有误或信息过旧，请知会我们，我们会尽快更新；
3.「动画工具」的动画库来源于Animate.css；
4.本站为自主研发，免费使用，未经我们授权许可不得擅自进行篡改转载、反编译。如遇雷同，不属巧合，我们保留合法追究之权利；
5.如使用IE浏览器访问不正常，本团队均不予解释并不承担任何责任；
6.在使用过程中如出现抽咽、流鼻涕、眼眶湿润，属正常现象；如出现头痛，呼吸困难、心悸、肩周刺痛，请及时下班或参加户外运动；如症状加深不遵医嘱造成的伤害均与我们无关，但我们会酌情前往探望。
/ 关于使用
「案例分享」集合了诸多CSS3动画相关但不仅限于CSS3动画的项目案例，均来自网友提供，可以在这里查阅相关DEMO或查找灵感，点击跳转至原目标站点。如果您有更好的URL，恳请提交。
「动画手册」保持以往的查阅习惯，保留语法、说明、属性取值、实例和兼容性说明，希望在实践中能便捷。
「动画工具」在手册资料的基础上，加上智能的在线调试、演示预览、导出代码等功能。目前包括“变形与过渡”、“自定义动画”与“动画库预设”。
“自定义动画”提供多个层与帧的设想，同时调试与设计。
/ 最后
过多的文字介绍都是苍白的，能把文字认真看完都是无聊的，看完不去试用并收藏都是耍流氓的，收藏完不去分享给同行都是自私的。
我们的承诺： 天惠公司将一如既往，秉承专业服务精神，一切从客户利益出发，为您率先建站,令您把握先机，长远的眼光定使您在商海搏击中稳操胜券。