因爲在項目中經常使用到transition，而且在學習vue過程也有transition過渡，因此在這裏着重瞭解一下：
W3C的官方文檔中是這樣闡述transition的：CSS的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。
transition主要包含四個屬性值：執行變換的屬性：transition-property,變換延續的時間：transition-duration,在延續時間段，變換的速率變化transition-timing-function,變換延遲時間transition-delay。下面分別來看這四個屬性值
一、語法
transition: property duration timing-function delay
transition屬性是個複合屬性，它包括以下幾個子屬性：
- transition-property ：規定設置過渡效果的css屬性名稱
- transition-duration ：規定完成過渡效果需要多少秒或毫秒
- transition-timing-function ：指定過渡函數，規定速度效果的速度曲線
- transition-delay ：指定開始出現的延遲時間
默認值分別爲：all 0 ease 0
注：transition-duration 時長爲0，不會產生過渡效果
一、transition-property:
transition-property: none |all |property;
值爲none時，沒有屬性會獲得過渡效果，值爲all時，所有屬性都將獲得過渡效果，值爲指定的css屬性應用過渡效果，多個屬性 用逗號隔開。
二，transition-duration
transition-duration：time;
該屬性主要用來設置一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續時間
三，transition-timing-function
transition-timing-function：linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n)
取值：
transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率，transition-timing-function有6個可能值：
1、ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).
4、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線 上點P1和點P2。所有值需在[0, 1]區域內，否則無效。
其是cubic-bezier爲通過貝賽爾曲線來計算“轉換”過程中的屬性值，如下曲線所示，通過改變P1(x1, y1)和P2(x2, y2)的坐 標可以改變整個過程的Output Percentage。初始默認值爲default.
注意：值cubic-bezier(n,n,n,n)可以中定義自己的值，如 cubic-bezier(0.42,0,0.58,1)
四，transition-delay
這個屬性沒什麼說的了，就是過渡效果開始前的延遲時間，單位秒或者毫秒
下面展示一個利用transition和transform結合實現一個3d導航欄的例子
<body>
<ul class = "nav">
<li>
<span>電子工程學院</span>
<span>西安電子科技大學</span>
</li>
<li>
<span>通信工程學院</span>
<span>西安電子科技大學</span>
</li>
<li>
<span>微電子學院</span>
<span>西安電子科技大學</span>
</li>
<li>
<span>人文學院</span>
<span>西安電子科技大學</span>
</li>
<li>
<span>經濟管理學院</span>
<span>西安電子科技大學</span>
</li>
<li>
<span>計算機學院</span>
<span>西安電子科技大學</span>
</li>
</ul>
</body>
body{
margin:0;
padding:0;
font-family:'微軟雅黑';
background:#F7F7F7;
}
.nav{
height:40px;
margin-top:50px;
text-align:center;
list-style:none;
}
li{
width:140px;
height:40px;
float:left;
text-align:center;
line-height:40px;
position:relative;
margin-right:10px;
transition:all 1s;
transform-style:preserve-3d /*只有子盒子全部使用了transform是纔能有用 */
}
li span{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
}
li span:last-child{
background:yellow;
transform:translateZ(20px)
}
li span:first-child{
background:blueviolet;
transform:rotateX(90deg) translateZ(20px)
}
li:hover{
transform:rotateX(-90deg)
}
效果如圖：
