>[success] # transition -- 動畫 ~~~ 1.在CSS3里使用transition可以實現補間動畫（過渡效果） 2.transition: 要過渡的屬性 花費時間 運動曲線 何時開始;（過渡所有屬性用all代替）。 3.必須前后屬性有變化才能觸發 ~~~ * 直接第一種簡寫，看總結第二條屬性介紹 | 屬性 | 描述 | CSS | | --- | --- | --- | | transition | 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 | 3 | | transition\-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 | | transition\-duration | 定義過渡效果花費的時間。默認是 0。 | 3 | | transition\-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 | | transition\-delay | 規定過渡效果何時開始。默認是 0。 | 3 | * 曲線示意圖  >[danger] ##### 使用場景 ~~~ 1. 當我們做將鼠標懸停改變當前元素的css 屬性時候，雖然不使用transition 也能實現， 但是 效果僵硬沒有過度效果，這時候可以使用transition 來解決這個問題 ~~~ >[danger] ##### 使用 ~~~ 1.transition 放到初始化的css 即一般在要做動畫的樣式中 2.若 transition 放在hover 中也可以執行動畫效果，但是動畫效果是雙向的，就會 導致，當鼠標離開的時候沒有動畫效果，所以推薦放在主體中。 ~~~ ~~~ img { width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%; transition:width 0.5s ease-in 0s; } img:hover { width:180px; } ~~~ >[danger] ##### 關于要改變多個元素和all 的使用 ~~~ div { width: 200px; height: 100px; background-color: pink; /* transition: 要過渡的屬性 花費時間 運動曲線 何時開始; */ transition: width 0.6s ease 0s, height 0.3s ease-in 1s; // transition: all 0.6s; /* 所有屬性都變化用all 就可以了 后面倆個屬性可以省略 */ /* transtion 過渡的意思 這句話寫到div里面而不是 hover里面 */ } div:hover { /* 鼠標經過盒子，我們的寬度變為400 */ width: 600px; height: 300px } ~~~