CSS3過渡效果，用於將鼠標懸停在和關閉

Question

當鼠標懸停在導航按鈕上時，我已經做出了懸停效果，但是當鼠標離開時，它會彈出回到原位。 我想知道如何正確地實現上下懸停的效果。

我曾嘗試將過渡代碼添加到a和a：hover上，但是當我這樣做時，每次導航到或刷新頁面時都會出現一些奇怪的不需要的過渡效果。

這是代碼：

nav a {
text-decoration: none;
padding: 25px 20px;
transition-property: background color ease-in-out;
transition-duration: 300ms;
transition-timing-function: linear;
}
nav a:hover {
background-color: #28292B;
transition-property: background color ease-in-out;
transition-duration: 300ms;
transition-timing-function: linear;
}

感謝大家！

Answer 1

改為這樣做：

 nav a {
text-decoration: none;
padding: 25px 20px;
-o-transition:.5s ease-in-out;
-ms-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-webkit-transition:.5s ease-in-out;
transition:.5s  ease-in-out;
}
nav a:hover {
background-color: #28292B;
    color:white;
}

JSFiddle示例

簡單容易。:)