1.javascript 動畫
基本的淡入淡出動畫
在jquery中 我們使用hide() 和show() 實現讓基本的元素塊隱藏和顯示的效果，當在.show() 或者.hide() 中指定時長，就會動畫效果
$("p").show('duration')
注意：duration 可以有三個取值 fast (等於200ms) ,slow （等於600ms）以及具體的毫秒值
雖然使用.show() 和 .hide() 方法在某種程度上可以創建出漂亮的效果，但其效果有時候也可能會過於花哨，爲此jquery提供了幾個更爲精細的動畫方法
fadeIn() 只是逐漸增大其不透明度
......
$('p).fadeIn('slow);
.......
同理fadeOut（） 會逐漸減小其不透明度
slideDown() 和slideUp（）滑上和滑下效果 這兩個效果僅改變元素的高度，要讓段落以垂直滑入的效果出現
slideToggle（）根據上下文來 切換slideDowm()以及sildeUp()
除了預置的效果方法以外還可以創建控制更加精細的自定義動畫 .animate()
.animate({ property1:'value1,property2:'value2},
duration: value,
easing：valueing
function（）{
//
}
)
或者
.animate({ property1:'value1,property2:'value2},
{
duration: value,
easing：valueing
}
function（）{
//
}
)
html 動畫
2. animate transtion trsansform
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。 爲了更好地理解 transform 屬性，請查看這個演示。 默認值：none 繼承性：no 版本：CSS3 JavaScript 語法：object.style.transform="rotate(7deg)" 語法 transform: none|transform-functions; 值 描述 none 定義不進行轉換。 matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 translate(x,y) 定義 2D 轉換。 translate3d(x,y,z) 定義 3D 轉換。 translateX(x) 定義轉換，只是用 X 軸的值。 translateY(y) 定義轉換，只是用 Y 軸的值。 translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。 scale(x,y) 定義 2D 縮放轉換。 scale3d(x,y,z) 定義 3D 縮放轉換。 scaleX(x) 通過設置 X 軸的值來定義縮放轉換。 scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。 scaleZ(z) 通過設置 Z 軸的值來定義 3D 縮放轉換。 rotate(angle) 定義 2D 旋轉，在參數中規定角度。 rotate3d(x,y,z,angle) 定義 3D 旋轉。 rotateX(angle) 定義沿着 X 軸的 3D 旋轉。 rotateY(angle) 定義沿着 Y 軸的 3D 旋轉。 rotateZ(angle) 定義沿着 Z 軸的 3D 旋轉。 skew(x-angle,y-angle) 定義沿着 X 和 Y 軸的 2D 傾斜轉換。 skewX(angle) 定義沿着 X 軸的 2D 傾斜轉換。 skewY(angle) 定義沿着 Y 軸的 2D 傾斜轉換。 perspective(n) 爲 3D 轉換元素定義透視視圖。