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做爲單位的。