CSS3 transition 屬性的(transition-timing-function速度曲線)

CSS3 transition 屬性的(transition-timing-function速度曲線)

本篇主要介紹transition屬性中的cubic-bezier速度曲線

先大蓋介紹transition屬性

transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：

transition-property

transition-duration

transition-timing-function

transition-delay

預設值： all 0 ease 0

語法

transition: property duration timing-function delay;

值	描述
transition-property	規定設置過渡效果的 CSS 屬性的名稱。
transition-duration	規定完成過渡效果需要多少秒或毫秒。
transition-timing-function	規定速度效果的速度曲線。
transition-delay	定義過渡效果何時開始。

本篇重點介紹的transition-timing-function中的cubic-bezier速度曲線

語法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n);

值	描述
linear	規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
ease	規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
ease-out	規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

提示：請在實例中測試不同的值，這樣可以更好地理解它們的工作原理。

Animation

雖然 transition 屬性簡單易用，但也有上述的侷限。因此就有了 animation 這個屬性來彌補其不足。

基本的 Animation

最基本的 animation 要指定動畫持續的時間，還有動畫的名稱。

div:hover {
  animation: 1s fat;
}

而動畫的定義則是用 @keyframes 這個屬性，例如：

@keyframes fat {
  0% { width: 100px; }
  50% { width: 150px; }
  100% { width: 200px; }
}

在 @keyframes 中可以定義多個狀態，範圍可從 0% 至 100% 。另外 0% 可寫成 from ， 100% 可寫成 to ，其他狀態還是使用數字百分比。

參考資料

http://www.w3school.com.cn/cssref/pr_transition.asp

http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp

http://cubic-bezier.com/#0,1,1,0
http://www.openfoundry.org/tw/tech-column/9233-css3-animation