CSS从右到左的过渡

Question

a { color: #000; text-decoration: none; }
a.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
padding: 8px;
border: 1px solid #ccc;
border-radius: 8px;
background: #eee;
transition: .2s;
.material-icons {
font-size: 24px;
transition: .2s;
}
.label-hidden {
max-width: 0;
opacity: 0;
max-height: 1em;
white-space: nowrap;
transition: .2s;
}
&:hover {
.label-hidden {
max-width: 200px;
margin-left: 8px;
opacity: 1;
}
}
}

<a class="button button-small"
target="_blank" rel="noopener noreferrer"
href={ "https://www.google.com/maps/search/" + it["Station Name"] }>
<i class="material-icons">map</i>
<span class="label-hidden">Show location</span>
</a>

我想将CSS应用到我的项目中，并在下面的链接中使用动画过渡。在这个例子中，过渡从左到右移动，但我想要从右到左的过渡。

任何解决方案都会有帮助

提前感谢。

Answer 1

你是说这样吗?

.wrapper {
text-align: center;
}

a { 
color: #000; 
text-decoration: none; 
}

a.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
padding: 8px;
border: 1px solid #ccc;
border-radius: 8px;
background: #eee;
transition: .2s;
}
.material-icons {
font-size: 24px;
transition: .2s;
}
.label-hidden {
max-width: 0;
opacity: 0;
max-height: 1em;
white-space: nowrap;
transition: .2s;

}
a.button:hover .label-hidden {
max-width: 300px;
margin-left: 8px;
opacity: 1;
}
a.button:hover {max-width: 200px;}
/* SAMPLE 2 CSS */
.wrapper2 {
text-align: center;
}

a { color: #000; 
text-decoration: none; 
}

a.button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
padding: 8px;
border: 1px solid #ccc;
border-radius: 8px;
background: #eee;
transition: .2s;
max-width: 50px;
}
.material-icons {
font-size: 24px;
transition: .2s;
}
.label-hidden2 {
max-width: 0;
opacity: 0;
max-height: 1em;
white-space: nowrap;
transition: .2s;
display: none;
}
a.button1:hover .label-hidden2 {
position: fixed;
opacity: 1;
left: 25%;
display: inline;
}
a.button1:hover { 
padding-left:135px;
margin-right:130px;
}

<!-- SAMPLE 1  -->
<div class="wrapper">
<a class="button button-small"
target="_blank" rel="noopener noreferrer"
href={ "https://www.google.com/maps/search/" + it["Station Name"] }>
<span class="label-hidden">Show location</span>
<i class="material-icons">map1</i>

</a>
</div>
<br />
<!-- SAMPLE 2  -->
<div class="wrapper2">
<a class="button button-small button1"
target="_blank" rel="noopener noreferrer"
href={ "https://www.google.com/maps/search/" + it["Station Name"] }>

<i class="material-icons"><span class="label-hidden2">Show location</span>map2</i>


</a>
</div>