因爲在項目中經常使用到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)
}
效果如圖：
語法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
例：animation: myanimation 2s linear 1s infinite forwards;
animation 屬性是一個簡寫屬性，用於設置動畫屬性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
- animation-name 動畫名稱
- animation-duration 動畫指定需要多少秒或毫秒完成
值：time 默認值爲 0，意味着沒有動畫效果
- animation-timing-function 設置動畫如何完成一個週期
值：linear 勻速
ease 先慢後快，結束前變慢 默認
ease-in 低速開始
ease-out 低速結束
ease-in-out 低速開始和結束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值
- animation-delay 動畫在啓動前的延遲間隔
值：time 默認值爲 0
- animation-iteration-count 動畫的播放次數
值：n 一個數字，定義播放多少次動畫 默認值1
infinite 動畫無限次播放
- animation-direction 是否輪流反向播放動畫
值：normal 正常
reverse 反向播放
alternate 在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放
alternate-reverse 在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放
- animation-fill-mode 當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要處於什麼狀態
值：none 默認，播放完動畫後，畫面停在起始位置
forwards 播放完動畫，停在animation定義的最後一幀(保持最後一個屬性值)
backwards 如果設置了animation-delay，在開始到delay這段時間，畫面停在第一幀。如果沒有設置delay，畫面是元素設置的初始值
both 設置動畫狀態爲動畫結束或開始的狀態（例如設置奇數播放爲forwards狀態，偶數播放爲backwards狀態）
- animation-play-state 動畫是否正在運行或已暫停
值：paused 指定暫停動畫
running 指定正在運行的動畫，默認
- initial 設置屬性爲其默認值
- inherit 從父元素繼承屬性