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