站長資訊網
css3過渡采用的屬性有：1、transition；2、transition-property；3、transition-duration；4、transition-timing-function；5、transition-delay。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
要實現這一點，必須規定兩項內容：
-
指定要添加效果的CSS屬性
-
指定效果的持續時間。
通過過渡transition屬性，可以讓web前端開發人員不需要javascript就可以實現簡單的動畫交互效果，要實現這一點，必須實現一項內容，即指定效果的持續時間。
css3過渡屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規定過渡效果何時開始。默認是 0。 | 3 |
復合屬性
過渡transition的這四個子屬性只有<transition-duration>是必需值且不能為0。其中，<transition-duration>和<transition-delay>都是時間。當兩個時間同時出現時，第一個是<transition-duration>，第二個是<transition-delay>；當只有一個時間時，它是<transition-duration>，而<transition-delay>為默認值0
transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
[注意]transition的這四個子屬性之間不能用逗號隔開，只能用空格隔開。因為逗號隔開的代表不同的屬性(transition屬性支持多值，多值部分稍后介紹)；而空格隔開的代表不同屬性的四個關于過渡的子屬性。
.test { border: 1px solid red; width: 100px; height: 50px; transition: 2s;/*代表持續時間為2s，延遲時間為默認值0 */ /* transition: 1s 2s; 代表持續時間為1s，延遲時間為2s */ } .test:hover { width: 300px; }
<div class="test"></div>
相關子屬性
1、transition-property
transition-property屬性指定CSS屬性的nametransition效果（transition效果時將會啟動指定的CSS屬性的變化）。none: 沒有指定任何樣式，all: 默認值，表示指定元素所有支持transition-property屬性的樣式。<transition-property>: 可過渡的樣式，可用逗號分開寫多個樣式。
注意：始終指定 transition-duration屬性，否則持續時間為0，transition不會有任何效果。
1）、可過渡的樣式
不是所有的CSS樣式值都可以過渡，只有具有中間值的屬性才具備過渡效果 ,具體如下
顏色: color background-color border-color outline-color 位置: backround-position left right top bottom 長度: [1]max-height min-height max-width min-width height width [2]border-width margin padding outline-width outline-offset [3]font-size line-height text-indent vertical-align [4]border-spacing letter-spacing word-spacing 數字: opacity visibility z-index font-weight zoom 組合: text-shadow transform box-shadow clip 其他: gradient
.test { border: 1px solid red; width: 100px; height: 50px; background-color: lightblue; transition: width 2s, background-color 2s ease 0.5s; /*代表width持續時間為2s，延遲時間為默認值0； background-color持續時間2s 延遲0.5s */ } .test:hover { width: 300px; background-color: indianred; }
效果圖：
2、transition-duration
transition-duration屬性規定完成過渡效果需要花費的時間（以秒或毫秒計）。默認值：0s。
[注意]該屬性不能為負值 。
[注意]若該屬性為0s則為默認值，若為0則為無效值。所以必須帶單位 。
[注意]該值為單值時，即所有過渡屬性都對應同樣時間；該值為多值時，過渡屬性按照順序對應持續時間 。
3、transition-timing-function
transition-timing-function屬性指定切換效果的速度。它可以取一下幾個值。默認值：ease 。
| 值 | 描述 |
|---|---|
| linear | 規定以相同速度開始至結束的過渡效果，即勻速。（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。 |
4、transition-delay
transition-delay屬性指定何時將開始切換效果，值是指以秒為單位（S）或毫秒（ms）。默認值：0s。
[注意]該屬性若為負值，無延遲效果，但過渡元素的起始值將從0變成設定值(設定值=延遲時間+持續時間)。若該設定值小于等于0，則無過渡效果；若該設定值大于0，則過渡元素從該設定值開始完成剩余的過渡效果 [注意]若該屬性為0s則為默認值，若為0則為無效值。所以必須帶單位 。
[注意]該值為單值時，即所有過渡屬性都對應同樣時間；該值為多值時，過渡屬性按照順序對應持續時間 。
過渡階段
-
過渡開始時間=樣式改變的時刻+過渡延遲時間；而過渡結束時間=過渡開始時間+過渡持續時間。
-
過渡起始值=過渡前的過渡屬性值；而過渡結束值=過渡完成后的過渡屬性值 。
-
過渡分為兩個階段：前進(forward)和反向(reverse)。若前進階段進行一段時間后進入反向階段，則反向階段的初始值是前進階段結束時的瞬時值
-
以hover為例，若在元素非hover態時設置transition，相當于設置的反向狀態。而前進和反向是一致的。而如果在元素hover態設置transition，則前進狀態以hover態設置的為準，而反向狀態以非hover態設置的為準 。
.test { border: 1px solid red; width: 100px; height: 50px; transition: 3s;/* 設置反向狀態 */ } .test:hover { width: 300px; transition: 100ms; }
效果:
觸發方式
一般地，過渡transition的觸發有三種方式，分別是偽類觸發、媒體查詢觸發和javascript觸發。其中常用偽類觸發包括:hover、:focus、:active等 。
-
hover ： 鼠標懸停觸發 。
-
active ： 用戶單擊元素并按住鼠標時觸發 。
-
focus ： 獲得焦點時觸發。
-
@media觸發 ： 符合媒體查詢條件時觸發 。
/* 把瀏覽器的寬度拖動到小于1000px時觸發 */ @media (max-width: 1000px){ .test{ width: 500px; } }
（學習視頻分享：css視頻教程）
