css3 動畫（一） transition

前言

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

transition

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

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

• transition-property：須要過渡的 css 屬性，如 width
• transition-duration：過渡的時長，如 1s
• transition-timing-function：指定一個函數，該函數反應了屬性值的變化快慢（速度）。能夠是緩動函數的名稱，也能夠是 css3 中的貝塞爾曲線函數
• transition-delay：延遲開始過渡的時間，如 0.5s

例子：

<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 和 貝塞爾曲線函數寫出一個加入購物車的動態效果（平拋運動效果）