css3 動畫（一） transition

hileix發表於2018-07-08
CSSS3動畫

前言

最近在研究 css3 的動畫屬性 transition 和 animation，發現自己之前對這兩個 css3 的動畫屬性並沒有太多深入的理解。本篇將介紹 css3 的 transition 以及自己的一些理解。

transition

首先，transition 意為 “過渡，轉場”，即從一種狀態變為另外一種狀態的中間過程。css3 的 transition 屬性，就是用來配置這個中間狀態的。

css3 中的 transition 屬性是 css3 過渡的四個屬性的簡寫形式，其四個 css3 的屬性分別為：

例子：

<div>transition</div>
div {
  background: #fff;
  color: #000;
  transition: all 1s linear 0.5s;
}
div:hover {
  background: #000;
  color: #fff;
}

效果如下：
https://codepen.io/reai3041/p…

在程式碼中，可以看到，我們需要預先使用 transition 屬性，配置選擇器樣式的變化過程。這個過程包含了四個屬性：需要有過渡效果的屬性、過渡時間、過渡速度變化函式以及延遲多久開始過渡。

然後，配置完 transition 屬性之後，在使用者產生某個行為時（如滑鼠 hover 到該元素上時），重新設定需要有過渡效果的屬性的新值。

在上面的例子中：

  • div 沒 hover 時的狀態（開始狀態）為：背景顏色為白色，字型顏色為黑色。
  • div 被 hover 時的狀態（結束狀態）為：背景顏色為黑色，字型顏色為白色。

倘若不使用 css3 的 transition 過渡屬性的話，則當 div 被 hover 時，div 的背景和字型樣式會瞬間從沒 hover 時的狀態 變為 被 hover 時的狀態，沒有過渡的效果。

上面的例子中，使用了 transition 屬性：

  • 指定了 all，即 div 的所有可以變化的樣式變化時都有過渡效果
  • 指定了過渡時長為 1s
  • 指定了過渡函式為 linear（線性），即變化速度為勻速
  • 指定了延時為 0.5s，即 hover 0.5s 之後，才開始過渡

注意

只有當過渡狀態過程中，transition 屬性存在（transition 被選擇器應用時）時，才會有過渡的效果，否則沒有過渡效果。

什麼意思呢？

我們可以看到上面的例子中：

  • 滑鼠移入 div 時，是有過渡效果的
  • 滑鼠移開 div 時，也是有過渡效果的

因為此時 transition 屬性是設定在 div 選擇器上的，不管移入和移出 div，transition 屬性都在過渡的過程中被 div 應用上了。

我們改一下程式碼（將 transition 屬性應用在 div 被 hover 時的選擇器上）

div {
  background: #fff;
  color: #000;
  }
div:hover {
  background: #000;
  color: #fff;
  transition: all 1s linear 0.5s;
}

效果如下：
https://codepen.io/reai3041/p…

此時可以看到：

  • 滑鼠移入 div 時，有過渡效果
  • 滑鼠移出 div 時，沒有過渡效果

移入時，transition 在 div:hover 選擇器上將 transition 屬性應用在了 div 上，即在過渡的過程中，div 是有 transition 屬性應用的

移出時，div 上沒有了 transition 屬性，此時便沒有了過渡效果，而是瞬間效果。

總結

1. 其實 transition 很簡單，就四個屬性：

  • 有過渡效果的屬性
  • 過渡時長
  • 過渡函式（下一篇講）
  • 過渡時延

2. 注意只有當選擇器在過渡的過程中，被應用了 transition 屬性，才會有過渡效果，否則是沒有過渡效果的，只有瞬間效果

下一篇：css3 動畫（二）貝塞爾曲線以及利用 transition 和 貝塞爾曲線函式寫出一個加入購物車的動態效果（平拋運動效果）

相關文章