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