過渡 (transition) 是可以在不使用Flash動畫或JavaScript的情況下，當元素從一種樣式變換成另一種樣式時為元素添加效果，經常和 :hover 一起搭配使用。

過渡動畫 : 是從一個狀態漸漸的過渡到另外一個狀態

可以讓我們頁面更好看，更動感十足，雖然低版本瀏覽器不支持( ie9以下版本) 但是不會影響頁面布局

哪個屬性要做過渡給誰加transition屬性

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

1.屬性 : 想要變化的 CSS屬性 ，寬度高度 背景顏色 內外邊距都可以。
如果想要所有的屬性都變化過渡，寫一個 all就可以。
2. 花費時間 : 單位是 "秒" (必須寫單位) EX : 0.5 s
3. 運動曲線 : 默認是 case ( 可以省略 )
4. 何時開始 : 單位是 "秒" (必須寫單位) 可以設置延遲觸發時間 默認是0s (可以省略)

       div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 變化的屬性 花費時間 運動曲線 何時開始;  後面兩個可以省略*/
            /* transition: width 5s ease 1s; */

            /* 如果要寫多個屬性用 逗號"," 做分隔 */
            /* transition: width 1s, height 1s; */

            /* 若想要多個屬性作變化 寫all即可  (常用)*/
            transition: all 1s;
        }

        div:hover {
            width: 400px;
            height: 200px;
            background-color: gold;
        }

過度效果範例

過度效果進度條範例