當我們學習完偽類選擇器之後，我們可以寫如下的**：
通過以上的**讓我們把滑鼠放在div上時，會自動的將寬度變為300px。
但是這個過程是瞬時的，我們如何將這個過程變的緩慢一點，呈現乙個過渡的效果呢？
這就需要我們今天將要學習的知識：過渡效果
-----------------------------------------分割線---------------------------
英語很好的同學應該可以知道「過渡」就是transition.
當我們用到transition的時候，我們需要設定兩個屬性，一是要告訴瀏覽器，我們要將哪乙個屬性呈現過渡效果；
另乙個就是我們過渡效果的時間是多少。
①transition-property: ; property就是屬性的意思。因此這個就是可以告訴瀏覽器我們要設定哪乙個屬性。
②transition-duration: 5s; duration就是過渡時間的意思。transition-duration就是過渡效果的過渡時間。
舉乙個栗子：
這時候div就會出現過渡變長的效果。
-----------------------------------分割線------------------------------------
過渡三要素：
1.必須要有屬性發生變化
2.必須告訴瀏覽器哪個屬性需要執行過渡效果
3.必須告訴瀏覽器過渡效果持續的時間
-----------------------------------分割線------------------------------------
如果是多個屬性需要進行過渡的話，就應該在transition-property的值後面加個逗號「,」並且再將屬性寫入，時間也是如此。
舉個栗子：
上述**可以讓div中的寬度和顏色都會呈現過渡的效果.
---------------------------------分割線--------------------------------------
關於transition的其他屬性：
通過上面的學習我們已經知道了transition-property 和 transition-duration
現在我們來學習：
transition-delay，例如transition-delay:2s; 意思就是當滑鼠懸停上的時候，拖延兩秒鐘再展示過渡動畫效果。
transition-timing-function:; 這個屬性就是用來控制速度的。分別有五個值，在w3c中都能夠找到
linear 是勻速
ease 是逐漸變慢
ease-in 是逐漸變快
ease-out 減速
ease-in-out 先加速後減速
過渡連寫的格式：
transition: width 5s linear 2s;
即 transition:過渡屬性 過渡時間 運動速度 延遲時間;
過渡連寫的注意點：
①如果要給多個屬性新增過渡效果，也是用逗號隔開即可。比如transition:width 5s linear 2s, background-color 2s ease 0s ;
②連寫的時候可以省略後兩個屬性，因為只要有前面兩個屬性就已經滿足了過渡效果的三要素。
------------------------------------------分割線--------------------------------------------
下面我貼出來乙個用過渡效果的乙個彈性動畫：
夢想
終將照進
現實
每天進步一點點
css 過度模組
一 a標籤偽類選擇器 1 標籤存在一定的狀態 1.1 預設狀態 從未被訪問過 1.2 被訪問過的狀態 1.3 滑鼠長按的狀態 1.4 滑鼠懸停在a標籤上的狀態 2 a標籤偽類選擇器是專門用來修改a標籤不同狀態的樣式的 2.1 link修改從未被訪問過的樣式 a link 2.2 visited修改被...
CSS動畫之過渡模組
hover偽類選擇器可以用於所有的選擇器 只有在懸停時，執行選擇器的屬性 css3中新增過渡模組 transition property 屬性 duration 過渡效果花費的時間 timing function 過渡效果的時間曲線 delay 過渡效果何時開始 簡寫 transition 過渡屬性...
css動畫之過渡
過渡屬性為transition，是屬於css3的屬性，所以在處理不同瀏覽器的相容性問題時，記得加上私有字首。如下 transition表示的是哪些屬性執行動畫所需要的時間 transform是應用於元素的2d或者3d轉換，其中屬性值有rotate表示的是旋轉多少度，translate表示的是在x和y...