transform translate transition 傻傻分不清楚

剛接觸 css 的夥伴們，有時候會被 transform translate transition 給繞暈，由於它們長得是這麼像，這篇用較短的篇幅給你們介紹，讓你們更好的區分它們。

transform

字面意思是：使…變形

屬性的做用是對給定的元素旋轉，縮放，平移或扭曲，經過修改元素的座標空間實現。

使用方式：transform: rotate | scale | skew | translate |matrix;

因此當咱們須要對元素作這些操做時，就須要使用 transform 屬性。

translate

大夥在 transform 的值中應該發現了 translate ， translate 的意思就是平移，將元素按照座標軸上下左右移動

使用方式： transform: translate(200px,50px); 元素較原先的位置，往右移動 200px，往下移動 50px

注意， translate 屬性須要在 transform 中才能使用， translate 其實也是屬於修改元素的空間位置。

transition

字面翻譯是過渡的意思，這個屬性可讓元素的變化以動畫的形式呈現，好比說太高度從100變到200 height:100px -> 200px ，沒有其餘屬性的狀況下，這個就是一瞬間的事，爲了讓頁面交互友好些，但願高度的變化能有個過渡效果，那麼 transition 就派上用場了。

官方介紹： transition 提供了一種在更改CSS屬性時控制動畫速度的方法，其可讓屬性變化成爲一個持續一段時間的過程。

transition 用來作動畫效果很是的方便，但缺點也很明顯，動畫不支持循環，複雜的動畫就難爲它了，因此適用於一些簡單的過渡效果。

它有四個值：

• transition-property：指定屬性用於生成過渡動畫，如寬、高、顏色等等，包括上面介紹的 transform ，只要這個屬性的值是能夠變化就行，且起始狀態都是明確的。

• transition-duration：動畫執行時間

• transition-timing-function：緩動函數， 內置了這些 ease | linear | ease-in | ease-out | ease-in-out ，也能夠上 easings.net/ 挑選本身喜歡的效果

• transition-delay：延遲執行的時間

三個一塊兒使用

咱們看下面這段 css，同時用上了咱們剛介紹的三個屬性，這段css的效果是，當鼠標移上元素的時候，元素在 200毫米內，勻速的往x軸和y軸放心移動了 100 像素。

.translate:hover {
    transition: transform .2s ease;
    transform: translate(100px,100px);
}
複製代碼

效果以下

總結

transform 是用來實現元素座標空間的變化， translate 用來移動元素， transition 給元素的變化加上動畫效果。