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

Transform

to change completely the appearance or character of something or someone

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

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

Translate

to change something into a new form

Transition

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

.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: 貝茲曲線 自定義速度模式

左側選單實際運用

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

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

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