過渡效果一般是由浏覽器直接改變元素的css屬性實作的，例如：使用:hover選擇器，一旦使用者将滑鼠懸停在元素之上，浏覽器就會應用跟選擇器關聯的屬性。當使用者滑鼠懸停在指定元素之上的時候，浏覽器就會響應，直接應用新的屬性值。
而CSS過渡特性允許我們控制應用新屬性值的速度，使變換效果更為和諧。過渡主要有以下幾個屬性值：
- transition-delay：指定過渡開始之前的延遲時間
- transition-duration：指定過渡的持續時間
- transition-property：指定應用過渡的屬性
- transition-timing-function：指定過渡期間計算中間值的方式
- transition：在一條聲明中指定所有過渡細節的簡寫屬性，transition的簡寫屬性格式如下：<property><duration><timing-function><delay>
過渡/反向過渡 效果一覽
注：當不設定transition-property的時候預設為發生變化的css屬性
: 反向過渡即直接在原CSS屬性上添加過渡屬性即可，傳回初始狀态看上去就沒那麼突兀了
: 剛開始布局頁面時浏覽器不會應用過渡，這意味着開始顯示時就會直接應用相關樣式，之後才會通過過渡來應用新樣式
動畫：CSS動畫本質上是增強的過渡。在如何從一種css樣式過渡到另一種樣式的過程中，可以具有更多選擇和更多控制以及更多靈活性。動畫主要有以下幾個屬性：
- animation-delay：設定動畫開始前的延遲
- animation-direction：設定動畫循環播放的時候是否反向播放
- animation-duration：設定動畫播放的持續時間
- animation-iteration-count：設定動畫的播放次數
- animation-name：指定動畫名稱
- animation-play-state：允許動畫暫停和重新播放
- animation-timing-function：指定如何計算中間動畫值
- animation：簡寫屬性，格式：<name><duration><timing-function><delay><iteration-count>
注：這些屬性都不是用來指定要作為動畫的CSS屬性的。這是因為紅花在兩部分定義的，第一部分包含在樣式聲明中，它們定義了哦那規劃的樣式，但并沒有定義哪些屬性是動畫。第二部分使用@key-frames規則建立，用來定義應用動畫的屬性。
動畫效果一覽
注: 動畫效果animation-play-state一般不在CSS定義動畫的時設為暫停模式，否則不能播 放，一般來說，此屬性可能應用于javascript比較好
: 初始值-動畫開始時候的狀态（和原狀态無關）from，50%關鍵幀。
: animation-direction，動畫先向前播放，然後反向播放。相當于animation-iteration-count值為2，但直接設定count值2而不設定animation-direction則無法反向。
: 可在name處設定多個動畫屬性，用，隔開。
CSS動畫的一個局限是關鍵幀為屬性定義的值隻能在動畫中應用，動畫借宿後動畫元素的外觀回到初始狀态，若想讓元素的外觀保留動畫結束時的狀态，必須使用過渡；而和多讀相比，動畫的一個優勢是你可以将其應用到頁面的初始布局
使用變換：transform屬性為元素應用變換，這個屬性允許的值是一組預定義的函數：
- translate：在水準方向，垂直方向或者兩個方向上平移元素（translateX，translateY）
- scale：在水準方向，垂直方向或者兩個方向上縮放元素（scaleX，scaleY）
- rotate：旋轉元素
- skew：在水準方向，垂直方向或者兩個方向上使元素傾斜一定的角度
- matrix：指定自定義變換。
transform:translate(35px,0px)平移效果
transform:rotate(15deg)旋轉效果
transform:scale(1.5)比例縮放效果
transform:skew(0deg,15deg)傾斜效果
注：若transform：rotate()和transform：skew()設定得當，可以達到同樣的效果；skew通過二參設定可以看成是（以正中心的x軸線，上下兩邊的元素以順時針的比例左右不等距離的相對移動），一參設定（以正中心的y軸線，左右兩邊的元素以順時針的比例上下不等距離的相對移動）；trnasform則是整個節點圍繞其中心點旋轉。設定節點寬度之後效果則較明顯
transform-origin：屬性指定應用變換的起點，預設情況下，使用元素的中心作為起點。
- <%> 指定元素x軸或者y軸的起點
- <長度值> 指定距離
- left，center，right 指定x軸上的位置
- top，center，bottom指定y軸上的位置
transform-origin:15% 0%起點效果預覽
将變換作為動畫和過渡處理
transform:rotate(360deg);transition-duration:1000ms效果預覽