CSS 動畫 ：transition

前言

日常開發遇到不會 就筆記

transition

transition:all是CSS 中的一個屬性，它控制元素在用戶交互或者更改樣式時發生動畫效果的速度。

它是 transition 屬性的簡寫，代表所有的可以過渡的CSS 屬性。

語法：

transition: <property> <duration> <timing-function> <delay>;

其中：

• property是要過渡的CSS 屬性的名稱，如果使用all，則表示所有的可以過渡的屬性。
• duration是過渡效果的持續時間，以秒或毫秒為單位。
• timing-function是過渡效果的速度曲線，可以是
  • linear（勻速）
  • ease（慢快慢）
  • ease-in（慢開始）
  • ease-out（慢結束）
  • ease-in-out（慢開始慢結束）
• delay是過渡效果的延遲時間，以秒或毫秒為單位

舉個例子

.div {
  transition: all 2s ease-in-out 0.5s;
}

這意味著當對這個元素的樣式進行更改時，
所有的可以過渡的屬性將以2秒的時間、
慢開始慢結束的速度曲線、
0.5秒的延遲時間進行過渡

整理表格如下

名稱	說明
property name	指定的屬性名稱
duration	轉場動畫持續的時間
timimg function	描述轉場時間的變化函式
delay	延遲執行轉場動畫的時間

transition-propert 屬姓名稱

定義哪些 CSS 屬性名稱要綁定 Transition 動畫。
transition-propert 有三種內建屬性：

• none : 無設定屬性，該值為預設值。
• all : 綁定所有 CSS 屬性。
• custom-ident : 依據 CSS 的 class 名稱指定屬性。

而要是 transition-propert 的值長度與其他 transition 屬性質長度不符合時，多餘的值將會被自動忽略。

再舉個例子

div {
  transition-property: opacity, left, top, width;
  transition-duration: 2s, 4s;
}

由上面範例得知，property 屬性的值長度超過 duration 屬型的值長度時 duration 屬性會重複匹配 property屬性。
因此 top 的過場時間為 2s，width 的過場時間為 4s。

要注意的一點是，transition 所綁定的 CSS 屬性必須是 可被計算之屬性。
舉例來說

• 可被計算屬性：

  • width: 100px;
  • backgraound-color: #fff;
  • text-indent: 30px;
  • margin-left: -50%;

• 不可被計算屬性：

  • display: block;
  • test-aling: center;
  • vertical-align: middle;

484很簡單啊~~~

References

• 第四章、今晚，我想來點…雙重口感切換的 Transition

• 前端新手村 Transition

-講講 CSS3 動畫Transitions

-MDN - transitions