之前接了几个微信里的项目，类似电子邀请函，什么分析报告这样的项目， 对css3动画要求十分高，每个页面客户几乎都有天马行空的想法，或者说设计师有这样的想法。
众所周知css3里的keyframe写好了就不能赋值复用的， 所以怎样能把keyframe通用起来就异常关键了。好，下面先上几个之前写的项目：（今天sae挂了 ，只好用别人的生产地址），手机打开或者chrome模拟看哦！
仔细看你就发现页面的动画有渐显，有飞入，而且可能2者或多者同时存在。
那么问题来了：是不是每个页面的keyframe都得单独写？
在说这个问题之前，你可能得掌握几种常用的水平居中，垂直居中，中心居中；水平偏移，垂直偏移的写法（以下demo效果请chrome模拟手机端打开，-webkit内核哦）。
demo1：postion结合margin:auto
demo2：postion和translate 一起使用达到水平、垂直居中
好 掌握了以上2个demo的写法和区别后，正在的项目上 ，往往用到的是根据水平中心点，或者垂直中心点偏移的写法，因为手机屏幕大小不一，所以这个写法异常常用。
demo3：中心点偏移
行 掌握后接下来可以为写通用动画作铺垫了（主要是飞入效果）
如果单纯渐显的话，咱们只需要控制opacity 就可以达到了：
扯了这么多 ，主角来了，就是飞入也分2种写法，一种就是每个飞入效果是一个width:100%;height:100%;的层，然后操作是整个层 translate，XY；但是这样写有一个很不方便就是审查元素的时候，放大镜只能定位到一个层上（多个飞入动画，别的层就给盖住了）
demo如下：
最后提一点 如果同时用到渐显和飞入，只需要设置好几个间隔一致的class就能很简单的混合使用了，例如有10个控制渐显的动画，和5个控制飞入的动画
.word_1 { opacity: 0; -webkit-animation:.8s ease word_1_kf .5s forwards;}.word_2 { opacity: 0; -webkit-animation:.8s ease word_1_kf 1.3s forwards;}.word_3 { opacity: 0; -webkit-animation:.8s ease word_1_kf 2.1s forwards;}.word_4 { opacity: 0; -webkit-animation:.8s ease word_1_kf 2.9s forwards;}.word_5 { opacity: 0; -webkit-animation:.8s ease word_1_kf 3.7s forwards;}.word_6 { opacity: 0; -webkit-animation:.8s ease word_1_kf 4.5s forwards;}.word_7 { opacity: 0; -webkit-animation:.8s ease word_1_kf 5.3s forwards;}.word_8 { opacity: 0; -webkit-animation:.8s ease word_1_kf 6.1s forwards;}.word_9 { opacity: 0; -webkit-animation:.8s ease word_1_kf 6.9s forwards;}.word_10 { opacity: 0; -webkit-animation:.8s ease word_1_kf 7.7s forwards;}/********************** 左边动画 start ********************************/.translateX_animation_left_1 { -webkit-transform: translateX(-100%); -webkit-animation: .8s ease translateX_1_left_kf forwards .5s;}.translateX_animation_left_2 { -webkit-transform: translateX(-100%); -webkit-animation: .8s ease translateX_1_left_kf forwards 1.3s;}.translateX_animation_left_3 { -webkit-transform: translateX(-100%); -webkit-animation: .8s ease translateX_1_left_kf forwards 2.1s;}@-webkit-keyframes translateX_1_left_kf { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); }}/********************** 左边动画 end ********************************//********************** 右边动画 start ********************************/.translateX_animation_right_1 { -webkit-transform: translateX(-100%); -webkit-animation: .8s ease translateX_1_right_kf .5 forwards;}.translateX_animation_right_2 { -webkit-transform: translateX(100%); -webkit-animation: .8s ease translateX_1_right_kf forwards 1.3s;}.translateX_animation_right_3 { -webkit-transform: translateX(100%); -webkit-animation: .8s ease translateX_1_right_kf forwards 2.1s;}.translateX_animation_right_4 { -webkit-transform: translateX(100%); -webkit-animation: .8s ease translateX_1_right_kf forwards 2.9s;}.translateX_animation_right_5 { -webkit-transform: translateX(100%); -webkit-animation: .8s ease translateX_1_right_kf forwards 3.7s;}@-webkit-keyframes translateX_1_right_kf { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(0); }}/********************** 右边动画 end ********************************/
word_1后可以随意执行 translateX_animation_right_2 或者 translateX_animation_left_2 ，然后word_3神马的。