簡述
CSS3中transition屬性定義了過渡，我們可以使用它來輔助我們實作一個邊框樣式的動畫過渡。
| 版權聲明：一去、二三裡，未經部落客允許不得轉載。
transition
定義和用法
transition 屬性是一個簡寫屬性，用于設定四個過渡屬性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
文法
transition: property duration timing-function delay;
| 值 | 描述 |
| transition-property | 規定設定過渡效果的 CSS 屬性的名稱 |
| transition-duration | 規定完成過渡效果需要多少秒或毫秒 |
| transition-timing-function | 規定速度效果的速度曲線 |
| transition-delay |
實作
效果
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type='text/css'>/* 動畫過渡 */
#main_menu a, #main_menu li {
-webkit-transition:0.4s ease-in-out 0s;
-moz-transition:0.4s ease-in-out 0s;
-o-transition:0.4s ease-in-out 0s;
-ms-transition:0.4s ease-in-out 0s;
/* 動畫效果
all：所有屬性都将獲得過渡效果
0.4s：完成過渡效果需要花費的時間
ease-in-out：規定以慢速開始和結束的過渡效果
0s：規定過渡效果何時開始
*/
transition:0.4s ease-in-out 0s;
}
/* 劃過樣式 */
#main_menu li:hover {
background:#EEE;
border-style: outset;
border-color:rgb(34, 177, 76);
}
/* 正常樣式 */
#main_menu li {
list-style: none;
border:3px outset #AAA;
margin:10px;
background:#AAA;
}</style>
</head>
<body>
<ul id="main_menu">
<li><a href="http://www.googto.com/">Googto</a></li>
<li><a href="https://www.hao123.com/">hao123</a></li>
<li><a href="http://blog.net/liang19890820">一去丶二三裡</a> </li>
</ul>
</body>
</html> ![分享幾個常用的css網站前言一、CSS 參考網站二、CSS 參考網站三、CSS集合 ，自由調節動畫參數，生成代碼片段：五、通過做飯，練習 CSS 選擇器六、送小青蛙回家，學習 flex 布局總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)