以前青岛网站设计上的动画基本都是依靠flash制作完成，后来慢慢出现了javascript技术，让动画的显示效率显著提高，随着浏览器对CSS3动画的支持越来越好（IE除外，IE10用户量还非常的少），CSS3动画应用也将日趋广泛，以前青岛网站制作很多只能用flash或者javascript实现的动画效果，现在用CSS3动画也能部分꧃的实现了。作为一个前端设计师，我们有足够的理由去使用CSS3动画让用户有更好的体验。

在使用CSS3动画设计构思前，我们须改变所有的浏览器都保持一致的思想，在不支持CSS3动画的主流浏览器里面保持最基本的功能体验，让支持CSS3动画的浏览器给用户提供更优的用户体验。

QQ音乐上周发布的QQ音乐年末回馈，全民领福袋的活动需求中，有习惯使用chrome等非IE浏览器的同学会发现一些好玩的效果，像《逆世界》电影一样，福袋里的礼品像失重般飞出来，贴在顶上，这是ecd同学利用CSS3动画设计的小创意。类似的效果，在很多的项目中都会出现，相信以后也会越来越多。更多的项目初试水如：
//y.qq.com/vip/promote_yearvip/
//y.qq.com/vip/levelUp/

写在前

“起初，神创造天地。”

C🍌SS3的出现已让web从业者兴奋了好久，但因兼容性的关系，应用面相对较窄，当然，也有不少的项目都有它𒆙的渗入，特别是在mac及移动终端领域。

好几个月前，我们在一个伟大项目中大肆使用CSS3及其更深入的动画属性ℱ，来替代古老年代需要JS来完成的选择和效果，给用户更冲“鸡”、更舒心的体验。

“神看光是好的、就把光暗分开了。”

资料整合后经过体验发现，资料整ꦑ理成的手册混入过多的DEMO不合适，这些动画属性参数DEMO应有个地方来存放，让资料查阅和动画属性参数DEMO都有各自的窝。同时，过多的“算法”和数学及校式属性的组合使用，会让很多人抓狂。于是增加了一个工具，可以在线设计动画、调试预览或调用集成库输出合适自己需要的CSS3动画代码，来满足另一部份不仅仅停留于查阅资料的诉求。

“神说、要有光、就有了光。”

大伙抬起头，露出诡异的笑容表示认同，并表示是应该有这么个利器来帮助人类工业复兴。于是他☂挽起裤管，提起脚丫夹起那双人字拖一脚踩在转椅上，N++分钟后，框架出来了。然来大伙坐下来讨论、需求分析、分工、输出计划deadline，经过团队全员业余长时间参与资料的整理、验证与校对，良好的阅读版面设计，资料手册有了一个比较完整的原型。

“神说、天上要有光体、可以分昼夜、作记号、定节令、日子、年岁。”

经过对目标用户的使用习惯与诉求采样分析，动画工具经过多次讨论后确认采用左右结构，左侧是三个TAB切换，可设计“变形过渡&rdq🗹uo;、“自定义动画”与“预设动画库”，右侧是效果预览区，方便即时检验动画的预期。

设计面板提供三种模式的混合：设置条拖动智能调整大概数值，手工输入ꦿ数值精确调整，预设效果与贝塞尔曲线混合，更多的操作发现可在体验中获得。

右侧预览区域，可把本机图片拖动到区域内替换默认图片，以获得更接近的动画效果。
在“自定义动画”设置时，右侧下面还提供一个时间轴动画层集合的调试区域（如上图），可在关键帧设置其时💛间位置与数值，或删除关键帧。

“地是空虚混沌，渊面黑暗，神的灵运行在水面上。”

ecd的小灰灰看着大伙桌面上堆积成山的各种资料，喃喃地说，做个网站吧，把我们用过的这些属性整ও合起来，方便我们自己查阅，如果可以🐠，也分享出来，方便广大劳动人民。

“并要发光在天空、普照在地上。事就这样成了。”

所有的功能特性都集合完毕，最后到整妆阶段，得有皮，是的，万物生长靠太阳，再牛X的东东也需要包装。
达人同学经过一周末的操刀画皮，并为此设计了一个野蜂飞舞的LOGO，大伙堆在一起整合优化ꦰ，体验并修改细节和BUG，经过多个日夜的奋斗。

就这么成了，就这么成了。

「CSS3动画参考」^{名字暂定，如您有更性感的名字，请告知我们。}由 ecd 数字音乐设计中心 利用业余时间整理/设计/研发输出，并在实际工作中得到验证，争取呈现的是🎉一份详细严谨的资料。

感谢ecd本项目团队huihui、darren、mousa、willi🌸ams、bryan、hugo、rock、pufen倾情辛苦奉献和广大业界知识份子的支持与鞭策，“神的光要照着我们！💯”

该工具使用HTMl5 & CSSS3设计开发，我们十分建议您使用Chrome、Safari、Firefox等浏览器进行访问使用。
在使用过程中有疑问或错误纠正，请在本贴留言。

“神称光为昼、称暗为夜．有晚上、有早晨、这是头一日。”

经过内部多天的体验使用发现，有了资料手册和工具，不能没有成品的品鉴，应该全民参与提交的一个案例集合，世间有取有予，才最和谐♊。网站第三块内容“案例分享”也就出现了。