html - 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