CSS筆記 ▎還分不清楚 transform 和 transition 嗎?

前幾天在學左側選單收合的技巧，發現自己還是常常把transform、transition，甚至是translate搞混！為了分清楚中文意思全部有「轉變」的三個關係字，並且理解到底什麼時候要用哪個屬性才正確，這篇筆記誕生了！

Transform

to change completely the appearance or character of something or someone

從單字分析上著手比較好記，字根trans加上form(形式)，即為形式上完全改變

transform是CSS的屬性之一，可以用它來控制HTML元素，做出旋轉、縮放、移動等效果

CSS寫法➜　 transform： 要帶入的效果(給效果設定的數值)；

.box１{
    transform: scale(2,2);
    }
.box2{
　　transform:translateX(150px);
　　}

範例：

• 滑鼠滑過綠色box，會透過 scale 放大2倍
• 滑鼠滑過黃色box，會透過 translate 右移150px

Translate

剛剛的範例看到translate出現了！因此translate並不是CSS屬性，而是transform裡面的「屬性值」，具有位移效果，從單字分析上來看：

translate (v.) 轉變

to change something into a new form

翻譯：將某物變成新的形式，就位移的效果而言，跟字詞解釋也是符合的！

Transition

transition (n.) 過渡、轉變

a change from one form or type to another, or the process by which this happens

翻譯：從一種形式或類型轉換成另一種，或是這個轉變發生的過程

transition可以用來設定基礎的動畫效果，直接指定要產生變化的CSS屬性

CSS寫法➜

transition： 指定CSS屬性 要執行的時間 延遲執行的時間 動態執行參數；

.aside{  
　　transition: margin-left 1s .3s cubic-bezier(0.3, 0.9, 0.1, -0.2);
　　}

上面是合併寫法，也可以把每個值分開寫成

.aside{
　　transition-property: margin-left;
　　transition-duration: 1s;
　　transition-delay: 0.3s;
　　transition-timing-function: ease;
　　}

• 動態執行參數 transition-timing-function 有以下幾個：
  linear: 平均速度
  ease: 快入緩出 (預設)
  ease-in: 緩入
  ease-out: 緩出
  ease-in-out: 緩入緩出
  cubic-bezier: 貝茲曲線 自定義速度模式

來看看範例吧：

Amber速記法：轉折詞 = transition words ➜ 因此transition就是迂迴轉變的過程

左側選單實際運用

研究完三個搞混的單詞後，回到左側選單的實際運用上，整理了兩種寫法：

寫法一：讓該物件透過transform位移，搭配transition的漸變轉換

.aside{  
　　transform:translateX(250px);
　　transition:0.3s ease;
　　}

寫法二：利用CSS本身的屬性去移動距離，搭配transition調整屬性轉變過程，之後用javaScript或jQuery去動態增加這個class名稱給該物件

.active{  
　　margin-left: 250px;
　　transition: margin-left 3s;
　　}

總結

• transform ：是CSS屬性，可以改變HTML元素特性
• translate：transform屬性值之一，能夠讓元素位移
• transition：是CSS屬性，改變CSS屬性的過程

今天的「變變變」筆記到此結束，我是Amber，前端學習中，歡迎交流討論🤞🏻
文中英文解釋擷取自劍橋辭典，技術概念及解釋為個人整理筆記。