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

CSS过渡不起作用

1 个答案: