前端制作动画的几种方式（css3，js）

font，fontSize

bottom，left，right，top

letterSpacing，wordSpacing，lineHeight，textIndent

可见通过jquery的animation生成动画的过程中可同时使用多个属性，也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=，如（height:’+=150px’），还可以使用队列机制进行步骤式的动画如：

div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");

动画就会按照顺序一步一步实现，并且不用考虑兼容性，因为几乎都兼容。　

 但是，animate函数只能够实现一些数值属性，能够实现的变化非常有限制，而且使用这个函数时还要配合stop来使用，在达到某条件时终止动画，设置比较复杂。

4.原生js动画

 原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。如下面的例子：需要自己定义所有的动态函数，并进行计算、判断和处理

<div id="odiv" class="odiv">
 <div id="sdiv" class="sdiv">
 </div>
</div>
<script language="javascript">
window.onload = function(){
 var odiv = document.getElementById('odiv');
 odiv.onmouseover = function(){
 startMover(0);
 }
 odiv.onmouseout = function(){
 startMover(-200);
 }
}
var timer = null;
function startMover(a){//速度和目标值
 clearInterval(timer);//执行当前动画同时清除之前的动画
 var odiv = document.getElementById('odiv');
 timer = setInterval(function(){
 var speed = (a-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值
 //如果速度是大于0，说明是向右走，那么就向上取整
 speed = speed>0?Math.ceil(speed):Math.floor(speed);
 //Math.floor();向下取整
 if(odiv.offsetLeft == a){
 clearInterval(timer);
 }
 else{
 odiv.style.left = odiv.offsetLeft+speed+'px';
 }
 },30);
}
</script>

5.插件

网上可以搜到很多封装好的动画插件，这些插件可以直接引入到页面中，通过初试话和配置的方式进行设定，直接在页面中展示动画。

如：waves，textillate.js等等。

6.使用canvas制作动画

我们还可以使用canvas在浏览器上画图，并且利用其api，制作动画。canvas使用的地方非常多，尤其是在制作h5小游戏上。