CSS Transition Out Not Working

Question

The transition on my code isn't transitioning out. When I hover over it, it's fine but when I move my mouse away it just goes back to the original without transition.

Here's the code:

#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

According to Mozilla, the text-align property is not animatable. The only reason that this code is animating at all is because the width is being animated. You'll have to use another property that is animatable, such as margin, padding or left.

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