Understanding CSS Transitions(理解 CSS 轉換)

那是 1997 年，我坐在馬薩諸塞州美麗的奧爾斯頓一間破舊的公寓裡。在當地一家唱片公司為花生打包 CD 的一天之後，我度過了典型的深夜查看源代碼並自學 HTML 的日子（因此破舊的公寓）。公寓）。我相信你能理解。

在一個勝利的夜晚，我揮舞著拳頭慶祝勝利。我剛剛成功編寫了我的第一個 JavaScript 圖像翻轉代碼。還記得那些嗎？

我仍然記得看到一個設計粗糙的按鈕圖形時的驚訝，當鼠標懸停在我上面時，我拼湊在一起“交換”到另一個按鈕圖形。我幾乎不知道我當時在做什麼，但在上面做了一些事情頁面成功地改變了，動態地，嗯……神奇。

在過去的十年裡，我們在網絡交互和視覺體驗方面取得了長足的進步。從歷史上看，Flash 和 JavaScript 等技術已經實現了動畫、移動和交互效果。但最近，隨著瀏覽器推出了對 CSS 過渡的支持和變換，一些動畫和豐富的體驗現在可以輕鬆地轉移到我們的樣式表中。

早在 1997 年，我的第一次 JavaScript 翻轉就讓我花了好幾個晚上的時間來絞盡腦汁，編寫了許多當時對我來說似乎很陌生的代碼，以及多個圖像。今天的 CSS3 通過簡單的代碼行實現了更豐富、更靈活的交互，值得慶幸的是，這些代碼可以優雅地降級在尚不支持它的瀏覽器中。

正如我在第 1 章中提到的，只要我們仔細選擇使用它們的情況，我們現在就可以開始使用一些 CSS3 屬性。對於 CSS 過渡也是如此。它們當然不會取代 Flash 等現有技術、JavaScript 或 SVG（尤其是沒有更廣泛的瀏覽器支持）——但與前面提到的核心 CSS3 結合使用
屬性（以及我們將在本書後面介紹的 CSS 轉換和動畫），它們可以用來將體驗層提升一個檔次。最重要的是，對於已經熟悉 CSS 的網頁設計師來說，它們相對容易實現.只需要幾行代碼。

我在第 2 章早些時候介紹了 CSS 轉換，因為我們將在本書後面的許多示例中應用它們。在我們深入研究之前，對轉換的語法及其工作原理有一個基本的了解將很有幫助。案例研究。

搖尾巴的狗(Tail wagging the dog)

CSS Transitions 最初由 WebKit 團隊專門為 Safari 開發，現在是 W3C 的工作草案規範（CSS Transforms 和 CSS Animations 具有相同的血統，我們將分別在第 4 章和第 6 章中討論它們。）

這是瀏覽器創新被折疊回潛在標準的一個很好的例子。我說是潛在的，因為它今天只是一個草案。然而，Opera 最近在 10.5 版本中添加了 CSS 轉換支持，而 Firefox 已承諾支持 4.0 版本。是一個草案規範並且正在不斷發展，它足夠穩定，足以讓 Opera 和 Firefox 認真對待它並添加對它的支持。最重要的是，CSS 轉換不再是 Safari 專有的實驗。

讓我們看一下過渡是如何工作的，好嗎？就像第 1 章中討論的 CSS3 屬性一樣，我在這裡只介紹它們及其基本語法，這樣您就可以很好地掌握它們的操作方式。我們將完成所有操作各種有趣的過渡事物，使用它們來完善前面章節中的示例，並且您將加快過渡的速度正確地融入混合物中。

什麼是 CSS 過渡(What are CSS transitions)?

我喜歡將 CSS 過渡想像成黃油，當由懸停、單擊和聚焦等交互觸發時，可以平滑樣式表中的值變化。與真正的黃油不同，過渡不會讓人發胖，它們只是樣式表中的一些簡單規則豐富您設計中的某些事件。

W3C 非常簡單地解釋了 CSS 轉換 (http://bkaprt.com/css3/3/):4

CSS 過渡允許 CSS 值的屬性更改在指定的持續時間內順利發生。

當鼠標單擊、焦點或活動狀態或元素的任何更改（甚至包括元素的類屬性的更改）觸發時，這種平滑會動畫化 CSS 值的更改。

一個簡單的例子(A simple example)

讓我們從一個簡單的示例開始，我們將在鏈接的背景顏色交換中添加過渡。只能使用 Flash 或 JavaScript，但現在只需幾行簡單的 CSS 即可實現。

標記(HTML)是一個簡單的超鏈接，如下所示：

⎗
✓
1
<a href="#" class="foo">Transition me!</a>

接下來，我們將為正常鏈接狀態添加一個聲明，並帶有一點填充和淺綠色背景，然後懸停時背景切換為深綠色（圖 2.01）：

⎗
✓
1
2
3
4
5
6
7
a.foo {
  padding: 5px 10px;
  background: #9c3;
}
  a.foo:hover {
  background: #690;
}

實作

index.html

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!-- File NameL index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>我的測試頁面</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <p>這是一個測試.</p>
  <a href="#" class="foo">Transition me!</a>
</body>
</html>

style.css

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// File NameL style.css
p {
  background-color: red;
}
a.foo {
  padding: 5px 10px;
  background: #9c3;
}
a.foo:hover {
  background: #690;
}
/*
    這也是註解
*/

執行

圖 2.01：鏈接的正常狀態和 :hover 狀態。

現在讓我們為背景顏色變化添加一個過渡。這將在指定的時間段內平滑並動畫化差異（圖 2.02）。

目前，為了簡單起見，我們將僅使用當前在基於 WebKit 的瀏覽器（Safari 和 Chrome）中工作的供應商前綴屬性。稍後，我們將為 Mozilla 和 Opera 添加供應商前綴。

style.css

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
a.foo:hover {
  background: #690;
}

圖 2.02：該圖顯示了淺綠色到深綠色背景的平滑過渡。

您會注意到聲明中轉換的三個部分：

  • transition-property：要轉換的屬性（在本例中為背景屬性(in this case, the background
    property)）
  • transition-duration(過渡持續時間)：過渡應持續多長時間（0.3 秒(0.3 seconds)）
  • transition-timing-function(轉換計時函數)：隨著時間的推移，轉換發生的速度有多快（輕鬆(ease)）

計時函數(Timing functions)（或者，我真的希望我在數學課上能集中註意力）

計時函數值通過定義六種可能性之一來允許過渡速度隨時間變化：ease、線性(linear)、ease-in、ease-out、ease-in-out 和三次貝塞爾曲線(cubic-bezier)（允許您定義您的 自己的時序曲線）。

如果你像我一樣在高中時睡過幾何，別擔心。 我建議簡單地插入這些計時函數值中的每一個，看看它們有何不同。

對於我們的簡單示例，轉換的持續時間非常快（僅 0.3 秒），以至於很難區分六個選項之間的差異。 對於較長的動畫，您選擇的計時函數變得更加重要，因為有時間注意到動畫長度上的速度變化。

如果有疑問，ease（這也是默認值）或 Linear 對於短過渡應該可以很好地工作。

延遲過渡(Delaying the transition)

回到我們的示例，從觸發在屏幕上發生的那一刻起，轉換就可以延遲。 例如，假設我們希望背景轉換在鏈接懸停後半秒發生。 我們可以使用轉換延遲屬性來做到這一點。

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0.5s;
}
  a.foo:hover {
  background: #690;
}

速記過渡(Shorthand transitions)

我們可以通過使用轉換簡寫屬性來顯著簡化（非延遲）聲明，這是我們將在本書後面的示例中使用的語法。

⎗
✓
1
2
3
4
5
6
7
8
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
}
  a.foo:hover {
  background: #690;
}

現在我們有了一個更緊湊的規則來實現相同的結果。

帶有延遲的速記轉換(Shorthand transition with a delay)

如果我們想在過渡的速記版本中添加半秒延遲，我們可以通過將持續時間值放在規則的末尾來做到這一點，如下所示：

⎗
✓
1
2
3
4
5
6
7
8
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease 0.5s;
}
a.foo:hover {
  background: #690;
}

現在可以肯定的是，所有這些美妙的轉換在 WebKit 瀏覽器中都可以正常工作，但是其他瀏覽器呢？

瀏覽器支持(Browser support)

正如我之前提到的，過渡最初是由 WebKit 開發的，從 3.2 版開始就出現在 Safari 和 Chrome 中，但 Opera 在 10.5 版中也支持它們 (http://bkaprt.com/css3/4/)5，並且支持已經 Firefox 4.0 中已承諾 (http://bkaprt.com/css3/5/).6

由於當前和不久的將來的支持，添加適當的供應商非常重要前綴，以便隨著支持的推出，我們的轉換可以在更多瀏覽器中運行。

構建完整的過渡堆棧(Building the full transition stack)

這是修改後的聲明，添加了 –moz-和 –o-前綴以及實際的 CSS3 過渡屬性。 同樣，我們將無前綴屬性放在堆棧的最後，以確保當屬性從草稿狀態轉變為完成狀態時，最終實現將勝過其他實現。

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
a.foo:hover {
  background: #690;
}

借助該堆棧，我們將平滑 Safari、Chrome 和 Opera 的當前版本以及選擇支持它的任何瀏覽器的未來版本中的背景顏色更改。

過渡狀態(Transitioning states)

我記得當我第一次開始使用 CSS 過渡時有點困惑。 如果將轉換屬性放置在 :hover 聲明中不是更有意義嗎，因為這是轉換的觸發器？ 答案是，除了 :hover 之外，元素還有其他可能的狀態，並且您可能希望在每個狀態上都發生這種轉換而不重複。

例如，您可能希望轉換也發生在鏈接的 :focus 或 :active 偽類上。 不必將轉換屬性堆棧添加到每個聲明中，而是將轉換指令附加到正常狀態，因此只需聲明一次。

以下示例將相同的背景開關添加到 :focus 狀態。 這使得可以觸發從懸停在鏈接上或聚焦鏈接（例如通過鍵盤）的轉換。

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
a.foo:hover, a.foo:focus {
  background: #690;
}

轉換多個屬性(Transitioning multiple properties)

假設除了背景顏色之外，我們還想更改鏈接的文本顏色和過渡。 我們可以通過將多個轉換串在一起來做到這一點，並用逗號分隔。 每個都可以有不同的持續時間和計時功能（圖 2.03）。

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background .3s ease, color 0.2s linear;
  -moz-transition: background .3s ease, color 0.2s linear;
  -o-transition: background .3s ease, color 0.2s linear;
  transition: background .3s ease, color 0.2s linear;
}
a.foo:hover, a.foo:focus {
  color: #030;
  background: #690;
}

圖 2.03：鏈接的正常狀態和 :hover 狀態。

轉換所有可能的屬性(Transitioning all possible properties)

列出多個屬性的替代方法是使用 all 值。 這將轉換所有可用的屬性。

讓我們將所有內容放入簡單的示例中，而不是單獨列出背景和顏色。 他們現在將共享相同的持續時間和計時功能。

⎗
✓
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
  a.foo:hover,
  a.foo:focus {
  color: #030;
  background: #690;
}

這是一種捕獲 :hover、:focus 或 :active 事件上發生的所有更改的便捷方法，而無需列出您想要轉換的每個屬性。

哪些 CSS 屬性可以轉換(Which CSS properties can be transitioned)?

現在我們已經成功轉換了超鏈接的背景和顏色，還有許多其他可以轉換的 CSS 屬性，包括寬度、不透明度、位置和字體大小。 W3C (http://bkaprt.com/css3/6/) 提供了可轉換的所有可能屬性（及其類型）的圖表。7

獲得美妙流暢體驗的機會是顯而易見的。 在下一章及後續的案例研究示例中，我們將結合使用其中的幾個屬性和轉換。

為什麼不使用 JavaScript 來代替呢(Why not use JavaScript instead)?

您可能想知道，並非所有瀏覽器都支持（或至少承諾支持）CSS 轉換，為什麼不使用 JavaScript 解決方案來處理動畫呢？ jQuery、Prototype 和 script.aculo.us 等流行框架已經通過 JavaScript 啟用了跨瀏覽器的動畫已有一段時間了。

這完全取決於過渡對體驗的重要性。 我在這本小書中強調，如果您選擇用戶體驗的適當部分來應用 CSS3，您就可以享受 CSS3 的簡單性和靈活性：豐富頁面上發生的交互。 通常，由 CSS 過渡處理的這些交互的動畫對於網站的品牌、可讀性或佈局來說並不是不可或缺的。 因此，用幾行簡單的 CSS 代碼來觸發支持它的瀏覽器原生的簡單動畫（而不是利用 JavaScript 框架）似乎是一個明智的選擇。 我很高興我們可以使用這一點。

聰明一點，微妙一點(Be smart, be subtle)

與所有閃亮的新工具一樣，正確使用過渡非常重要。 人們很容易過度地向頁面上的所有內容添加過渡，從而導致某種煩人的、脈動的怪物。 決定哪些過渡可以正確地豐富用戶體驗以及什麼時候它們只是無關的噪音是關鍵。 此外，確保轉換速度不會減慢用戶原本敏捷的操作，這一點至關重要。 請小心謹慎使用。

有關 CSS 過渡和動畫的適當速度的更多想法，請參閱 Trent Walton 關於該主題的帖子：http://bkaprt.com/css3/7/.8

現在我們已經對 CSS 過渡如何在技術層面上工作有了紮實的基礎知識，我們可以使用它們來平滑後續示例中的體驗層，從下一章開始。 讓我們開始吧。

  1. 長網址：http://www.w3.org/TR/CSS3-transitions/ [↵]
  2. 長網址：http://www.opera.com/docs/specs/presto23/css/transitions/ [↵]
  3. 長 URL：https://developer.mozilla.org/en/CSS/CSS_transitions [↵]
  4. 長網址：http://www.w3.org/TR/css3-transitions/#properties-from-css- [↵]
  5. http://trentwalton.com/2010/03/22/CSS3-in-transition/ [↵]

jangowkVyTx8mz20230710modh6

Warning

LINK

You are about to visit a link which has been flagged with the above content warnings. Do you wish to continue?

Cancel
Edit
Raw PDF PNG WebP JPG

Pub: 10 Jul 2023 10:27 UTC

Edit: 10 Jul 2023 10:28 UTC

Views: 15

new· what· how· langs· contacts· login