简述
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: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
/* 动画效果
all：所有属性都将获得过渡效果
0.4s：完成过渡效果需要花费的时间
ease-in-out：规定以慢速开始和结束的过渡效果
0s：规定过渡效果何时开始
*/
transition: all 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.csdn.net/liang19890820">一去丶二三里</a> </li>
</ul>
</body>
</html>