js、jquery和css 3中的动画实现效果

①js实现动画有两种方法：

setTimeout（）
setInterval（）

②Jquery实现动画的方法：

自定义方法animate和非自定义方法。

非自定义方法有显示、隐藏、切换等方法：

显示：show（）、slideDown（）、fadeIn（）
隐藏：hide（）、slideUp（）、fadeOut（）
切换：toggle（）、slideToggle（）、fadeToggle（）

自定义方法animate：

语法：

JqueryObject.animate(params,[speed],[easing],[fn])

即animate方法最小须要1个参数，即指定进行动画的属性。最多有4个参数，分别是动画时间、动画过程、以及动画完成后的回调函数。

其中，params属性必须是能够有动画效果的，好比top、color、width，这些属性必须是骆驼命名形式。

好比：

$('div').animate({
    marginLeft:'100px'
})

注意，animate方法不支持背景色backgroundColor，必须使用color.js插件。

③CSS 3

实现动画的方式有2种：@keyframes/animation方法和transition/transform方法

@keyframes 动画名{
    from{top:0px;}
    to{top:100px;}
}

注意：@keyframes是CSS 3的选择器，其中{}不是json对象（json对象格式是键值对，键与值之间是：，对于对之间是，）这里属性之间是分号，且属性值不是字符串。

animation方法

具备动画名，持续时间，动画过程，延迟，播放次数，放向，动画中止后状态，动画运动与否等配置项。

div{
    animation:动画名 1s
}

transition

包括属性名、时间、动画过程、延迟

div{
    transiton:all 1s;
}

transform补充了一些可运动的属性，好比平移、扭曲、拉伸、旋转

div{
    transform:translate(100px,50px) scale(1,2);

}

注意：JS和jquery方法中的时间都是以ms做为单位的，而CSS中的animation和transition都是以s做为单位的。