1、translate:移動，transform的一個方法

通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數：

用法transform: translate(50px, 100px);

-ms-transform: translate(50px,100px);

-webkit-transform: translate(50px,100px);

-o-transform: translate(50px,100px);

-moz-transform: translate(50px,100px);

2、transform:變形。改變

屬性定義及使用說明

Transform屬性應用於元素的2D或3D轉換，整數型允許你將元素旋轉，縮放，移動傾斜等。

JavaScript語法： object.style.transform="rotate(7deg)"

CSS3中主要包括

旋轉：rotate() 順時針旋轉給定的角度，允許負值 rotate(30deg)

扭曲：skew() 元素翻轉給定的角度,根據給定的水平線（X 軸）和垂直線（Y 軸）引數：skew(30deg,20deg)

縮放：scale() 放大或縮小，根據給定的寬度（X 軸）和高度（Y 軸）引數： scale(2,4)

移動：translate() 平移，傳進 x,y值，代表沿x軸和y軸平移的距離

所有的2D轉換方法組合在一起： matrix() 旋轉、縮放、移動以及傾斜元素

matrix(scale.x ,, , scale.y , translate.x, translate.y)

改變起點位置 transform-origin: bottom left;

3、transition: 允許CSS屬性值在一定的時間區間內平滑的過渡，需要事件的觸發，例如單擊、獲取焦點、失去焦點等

transition:property duration timing-function delay;

property:CSS的屬性，例如：width height 為none時停止所有的運動，可以為transform

duration:持續時間

timing-function:ease等

delay:延遲

注意：當property為all的時候所有動畫

例如：transition:width 2s ease 0s;

一、區分容易混淆的幾個屬性和值
先區分一下css中的幾個屬性：animation（動畫）、transition（過渡）、transform（變形）、translate（移動）。

CSS3中的transform(變形)屬性用於內聯元素和塊級元素，可以旋轉、扭曲、縮放、移動元素，它的屬性值有以下五個：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix；

transform(變形)是CSS3中的元素的屬性，而translate只是transform的一個屬性值；transform是transition（過渡動畫）的transition-property的一個屬性值。

animation（動畫）、transition（過渡）是css3中的兩種動畫屬性。animation強調流程與控制，對元素的一個或多個屬性的變化進行控制，可以有多個關鍵幀（animation 和@ keyframes結合使用）；

transition強調過渡，是元素的一個或多個屬性發生變化時產生的過渡效果，同一個元素通過兩個不同的途徑獲取樣式，而第二個途徑當某種改變發生（例如hover）時才能獲取樣式，這樣就會產生過渡動

畫。可以認為它有兩個關鍵幀（Transition ＋ Transform ＝ 兩個關鍵幀的Animation）。