參考原文章（問答）：
css3 transition width在變長的時候 能以中心爲原點，向兩邊伸長嗎？
我在項目中用來作爲導航菜單的鼠標懸停交互 :
核心代碼(CSS)：
.container {
text-align: center;
}
.bar {
width: 100px;
display: inline-block;
transition: 1s all cubic-bezier(.46, 1, .23, 1.52);
}1、需要使目標元素（.bar）位置居中，除了對其自身設置“display: inline-block;”且父元素設置“text-align: center;”， 還可以對目標元素設置“margin: 0 auto;”
2、cubic-bezier(.46, 1, .23, 1.52) 爲貝塞爾曲線函數，詳情請自行查找參考文檔。
以下爲參考文章後修改過的示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hoverSlideout Demo</title>
<style type="text/css">
.container {
text-align: center;
}
.bar {
width: 100px;
display: inline-block;
transition: 1s all cubic-bezier(.46, 1, .23, 1.52);
border: 1px solid #e3e3e3;
border-radius: 4px;
background-color: #ef5621;
padding: 10px 20px;
box-sizing: border-box;
}
.bar.active {
width: 200px;
} </style>
</head>
<body>
<h3>css3 transition 實現div寬度以中心爲原點向兩邊伸長</h3>
<div class="container">
<div class="bar"></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript"> $('.bar').hover(function () {
$('.bar').toggleClass('active');
}); </script>
</body>
</html>