一、過渡（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: 1px solid #ccc;
height: 30px;
width: 40px;
transition: all .5s;
}
input:focus {
width: 80px;
border: 1px solid red;
}