一、過渡（CSS3）

1、過渡（transition）是CSS3中具有顛覆性的特徵之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素新增效果。

2、過渡動畫：是從一個狀態漸漸的過渡到另外一個狀態。

3、可以讓我們的頁面更好看，更動感十足，雖然低版本瀏覽器不支援（ie9以下版本），但是不會影響頁面佈局。

4、我們現在經常和 :hover 一起搭配使用。

5、語法格式：

transition:要過渡的屬性花費時間運動曲線何時開始; 6、

屬性	描述	CSS
transition	簡寫屬性，用於在一個屬性中設定四個過渡屬性	3
transition-property	規定應用過渡的CSS屬性的名稱	3
transition-duration	定義過渡效果花費的時間，預設是0	3
transition-timing-function	規定過渡效果的時間曲線，預設是“ease”	3
transition-delay	規定過渡效果何時開始，預設是0	3

7、屬性 屬性就是你想要變化的css屬性，寬度高度、背景顏色、內外邊距都可以，如果想要所有的屬性都變化過渡，寫一個 all 就可以了。 8、花費時間 transition-duration 花費時間 單位是 秒 （必須寫單位）s ms 比如0.5s，這個s單位必須寫，ms毫秒 9、運動曲線，預設是 ease 運動曲線示意圖：

10、何時開始

預設是0s，滑鼠觸發就立即出發，可以設定延遲觸發時間

二、獲得焦點元素 1、:focus 偽類選擇器用於選取獲得焦點的元素，這裡主要針對的是表單元素 　 :hover 2、語法 　　input{ border:1pxsolid#ccc; 　　　 height: 30px; 　　　 width: 40px; 　　　 transition: all .5s; } input:focus{ width: 80px; border:1pxsolidred; }