animate是个非常冷门的方法，以至于百度和手册上都找不到相关的资料。当然通过一个小小的demo，我还是发现了方法的一些属
animate是所有dom元素都有的方法，可以用来最做过度动画，关键帧动画。这个方法可以更方便的让我们制作动
animate共有两个参数 (很可惜似乎没有回调函数，没发现)
关键帧 (参数可以是数组或对象，数组内包裹的也必须是对象)
对象里的属性就是css属性和值了
动画属性设置 {参数数字或者对象}
目前发现的属性有以下 ：
通过两个案例说明一下:
过度动画即第一个参数直接为对象{}
<div id="box" style=”width: 200px;height: 200px;background: red;border-radius:50% 50% 0 0;”></div>
<script>
// 获取元素对象
var box = document.getElementById("box");
box.animate(
{ // 对象
transform:'rotate(360deg)'
},
{
duration: 1000, // 动画时长 (单位毫秒)
easing:'linear', // 平滑
iterations: Infinity, // 重复次数 （无限循环：Infinity）
},
);
</script>
第二个小盒子移动，第一个参数是数字，数组包裹着对象(每个对象就算一个关键帧)[{},{}]
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: red;
position: absolute;
border-radius:50% 50% 0 0;
}
</style>
<div id="box"></div>
<script>
box.animate(
[ //关键帧（数组包裹对象）
{transform:'translate3d(0px, 0px, 0)',opacity:'1'}, // 第一帧
{transform:'translate3d(50px, 0px, 0)',opacity:'.8'}, // 第二帧
{transform:'translate3d(150px, 100px, 0)',opacity:'.5'}, // 第三帧
],
{
duration: 1000, // 动画时长 (单位毫秒)
iterations: 1, // 重复次数 （无限循环：Infinity）
fill:'forwards', //结束时不复位
delay:0, // 设置动画延迟时长 (单位毫秒)
easing:'linear' //设置动画 运动速率 (linear: 匀速)
},
);
</script> 
