CSS之過渡transition

CSS的過渡屬性transition能夠僅經過CSS來實現簡單的動畫效果，同時它是一個簡寫屬性，由transition-property、transition-duration、transition-timing-function和transition-delay複合而成。

過渡屬性

1. transition-property 指定應用過渡屬性的名稱。

transition-property: all; // 默認爲all，全部可被動畫的屬性都表現出過渡動畫。
transition-property: none; // 沒有動畫效果
transition-property: width, height; //也能夠取其餘屬性的值
複製代碼

2. transition-duration 屬性以秒或毫秒爲單位指定過渡動畫所需的時間。默認值爲 0s ，表示不出現過渡動畫。

transition-duration: 1s;
transition-duration: 1ms;
transition-duration: 1s, 10s, 10ms; // 能夠應用多個值，對應於transition-property的多個屬性，表示每一個屬性對應的延時時間

複製代碼

3. transition-timing-function 表示過渡動畫的運動曲線。

transition-timing-function: cubic-bezier(n, n, n, n); // 在bezier 函數中自定義 0 ~ 1 之間的數值
transition-timing-function: ease; // 默認值，慢速開始，中間變快，慢速結束；至關於 cubic-bezier(0.25, 0.1, 0.25, 1)。
transition-timing-function: linear; // 勻速運動；至關於 cubic-bezier(0, 0, 1, 1)。
transition-timing-function: ease-in; // 慢速開始；至關於 cubic-bezier(0.42, 0, 1, 1)。
transition-timing-function: ease-out; // 慢速結束；至關於 cubic-bezier(0, 0, 0.58, 1)
transition-timing-function: ease-in-out; // 慢速開始，慢速結束；至關於 cubic-bezier(0.42, 0, 0.58, 1)
transition-timing-function: step-start;
transition-timing-function: step-end;
transition-timing-function: steps(4, end);
複製代碼

4. transition-delay 表示過渡效果的延遲時間

transition-delay: 3s;
複製代碼

簡寫屬性

transition是上面四個過渡屬性的簡寫，其中只有transition-duration是必填屬性。

transition: all 5s linear .2s; // 以空格隔開屬性
transition: all 5s linear .2s, height 3s ease-in-out; // 能夠以逗號隔開多個過渡。
複製代碼

使用場景

transition通常在css中配合:hover, :active等僞類使用,實現相應等動畫效果。

.app {
  width: 300px;
  transition: all 3s linear .2s;
}

.app:hover {
  width: 100;
}
複製代碼

相似上面這種簡單的鼠標移到class=app的html元素上，會出現簡單的動畫。

過渡階段

過渡分爲兩個階段：前進（forward）和反向（reverse），下面會用具體的例子來詳細講述這兩個階段。

1. 只在非hover狀態設置transition 該狀態下設置的transition認爲設置了反向狀態的過渡動畫，即鼠標移到元素上又離開時的動畫，而此時前進狀態和反向狀態保持一致，也就是說鼠標移到和移開元素都有過渡動畫。

.app {
  width: 300px;
  transition: all 3s linear .2s;
}

.app:hover {
  width: 100;
}
複製代碼

2. 只在hover狀態下設置transition 該狀態下設置的transition認爲設置了前進狀態的過渡動畫，而此時反向狀態是沒有動畫的。也就是說鼠標移到元素上會有動畫，移出元素沒有動畫，元素寬度會瞬間還原。

.app {
  width: 300px;
}

.app:hover {
  width: 100;
  transition: all 3s linear .2s;
}
複製代碼

3. 同時在hover和非hover狀態下都設置transition 此時即設置了前進狀態也設置了反向狀態的動畫，鼠標移到元素上動畫持續1s,鼠標移出元素動畫持續3s。

.app {
  width: 300px;
 transition: all 3s linear .2s;
}

.app:hover {
  width: 100;
  transition: all 1s linear .2s;
}
複製代碼

4. 過渡狀態切換時的取值 當前進和反向狀態切換時，若是上一個狀態的動畫尚未結束，下一個狀態的起始值是上一個狀態最後時刻的值，也就是說兩個狀態切換時動畫會連續播放，不會發生突變。 當父級元素正在過渡時若是子元素觸發過渡動畫，則子元素過渡狀態的起始值是繼承了父元素正在過渡時的值。
5. 隱式過渡 指一個屬性的改變引發另外一個屬性的改變時發生的過渡。 此屬性Chrome和Safari不支持，Firefox和IE支持。