H5小动效网站制作方法与技巧
时间：2016-11-25
众所周知，一个元素，动往往比静更吸引眼球；
一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；
一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。
1.常见的动效制作技术
动效制作手法1：GIF
GIF图片擅长于制作细节的小动画，位图，优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GIF格式等等。
2.动效制作手法2：逐帧动画
逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。step()在移动端的兼容性是很好的，但使用比较小众。逐帧动画和GIF动画的差别在于，脚本可以控制逐帧动画的快慢和动作的暂停，而GIF动画无法在后期通过代码进行动画速率及透明度的修改。
3.动效制作手法3：CSS3
CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。比如IE8.0以下的版本还不支持CSS3的一些属性：
很多炫酷到没朋友的动画效果主要就是依靠CSS3编写完成的。
其中CSS3制作动画主要的三大属性：Transform 变形，Transition 过渡，和Animation 动画。
