CSS轉換不工作

Question

我的代碼轉換沒有轉換出來。當我將鼠標懸停在上面時，沒有問題，但是當我將鼠標移開時，它只能回到原始狀態，而沒有轉換。

下面的代碼：

#nav a { 
display:inline-block; 
text-transform:lowercase; 
width:35px; 
padding:5px; 
margin-left:3px; 
font-size:9px; 
letter-spacing:1px; 
text-align:left; 
border-bottom:1px solid {color:border}; 
-webkit-transition: all 0.7s ease-out; 
-moz-transition: all 0.7s ease-out; 
-ms-transition: all 0.7s ease-out; 
-o-transition: all 0.7s ease-out; 
transition: all 0.7s ease-out; 
} 

#nav a:hover { 
width:50px; 
text-align:right; 
border-bottom:1px solid {color:border}; 
} 

Answer 1

據Mozilla中，text-align屬性不是動畫。這段代碼根本就是動畫的唯一原因是因爲寬度是動態的。您必須使用另一個可動畫的屬性，例如margin，padding或left。

來源：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties?redirectlocale=en-US&redirectslug=CSS%2FCSS_animated_properties