transform，transition，animation，keyframes區別

這裏不講最基礎的東西好比這些的含義，站內不少人都有講，這裏對比一下講一講區別，加深一下理解。

看不明白的地方歡迎評論，我更改一些措辭，或者加一些示例。

其實要區別一些屬性的最好方法就是看翻譯，翻譯成中文不少就顧名思義了！

transform轉變

transform並非一個動態屬性，他是一個靜態的屬性。專一於改變元素基於默認位置的如下值。
注意，只是改變，並非一個過程，只是針對css的各類特殊改變，徹底能夠看做是與width，height，position等同類的屬性。

值	描述
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 轉換元素定義透視視圖。

transition過渡

transition是指當它所綁定的屬性（好比width）發生改變的時候，再也不突變，而是根據速度曲線慢慢變化。
這種改變不單單是定義好的hover改變，也包括後期js致使的改變，甚至不當心替換class名致使的css屬性改變，也就是說不管在何種狀況下發生的屬性改變，都會致使過渡。
這個時候就會知道transition並非與transform綁定的屬性，初學者（好比我>.<）在剛看的時候總會覺得有transform必然有transition，否則不可用，然而其實transition是徹底能夠不須要transform而獨立使用的。
transform能夠看做只是一個基礎屬性，與width，height，position同類的屬性，而transition只是規定了發生過渡的時候所需的自定義規則，二者獨立使用也可。

值	描述
transition-property	規定設置過渡效果的 CSS 屬性的名稱。
transition-duration	規定完成過渡效果須要多少秒或毫秒。
transition-timing-function	規定速度效果的速度曲線。
transition-delay	定義過渡效果什麼時候開始。

animation動畫

先看錶

值	描述
animation-name	規定須要綁定到選擇器的 keyframe 名稱。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始以前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

它已然規定須要綁定keyframe，這就說明animation纔是與keyframes不可分割的，不定義animation，keyframes寫了毫無心義，keyframes不寫，animation怎麼也動不起來。

由此可知，keyframes是幫助animation的一個東西，那咱們先看看keyframes再說animation。

keyframes關鍵幀

熟悉動畫製做的同窗估計都知道關鍵幀，他也能夠看做時間幀，這個時間在表述的時候以百分比的形式展現出來。

@keyframes move
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

在每一個百分比裏，其實就是寫好的css樣式，裏面能夠規定width等基礎屬性，固然也能夠寫transform！按照時間從小到大進行過渡

那最後keyframes就是已經寫好的有過渡的動畫動做，這纔是動態的！
transform只是某刻的轉變，加了時間，才叫動態，才叫動畫！

那寫好了動畫，給誰用，就用到了animation，將animation配置好寫到css裏，就能夠給特定元素輔以動畫了！
每寫出來的一個keyframes，只是表明一個動畫行爲，變長變短，轉圈圈，僅此而已，沒有別的含義了。
使用keyframes的就是animation了。

transition與animation的區別

因此其實要說區別，應該是要區分transition與animation的區別，說了這麼多，顧名思義就能夠看出來，一個是過渡，一個是動畫！硬要說的話，過渡是隻有兩個幀的動畫，動畫是有不少次過渡的過渡。

transition是由屬性的變化而觸發的，不管這個變化是否是咱們指望的，只要屬性改變，就會觸發transition。
animation的觸發就是咱們所設置的，根據她所規定的值指定咱們想要的規則，能夠在一開始就執行，能夠執行一次不再變。