Html 为锚定标记内的图标设置动画，使其在悬停状态下飞行

我需要一个CSS/SCSS/SASS专家来帮助我确定这个简单动画的错误

目标：我要完成的是一个简单的动画，在这个动画中，fontawesome图标

fa angle right

在单词onHover之后从左侧飞入。我想这可以通过

display:none

属性和向父属性添加一些

transition

来实现，但它没有按预期设置动画

这里需要注意的是，我不能更改HTML结构

)；但这是使用不同的HTML结构&SVG而不是图标

JSFiddle：

HTML

<a href="#" class="btn ripple">
     <i class="fa fa-left fa-location-arrow"></i> 
     <span class="label">View Location </span>
     <i class="fa fa-right fa-angle-right fa-animate"></i>
</a>

---

在此方面的任何帮助都将不胜感激

这就是你想要的吗？像这样修改样式

.fa-animate{
 left: -15px;
 position:relative;
 opacity: 0;
 transition: 1s;
}
&:hover{
 background: blue;
 .fa-animate{
  left: 0;
  opacity:1;
 }
}

---

完整编辑的代码：

这正是我想要的！非常感谢。很高兴帮助您我确实发现了一个小问题，因为按钮更大，文本看起来偏离中心。有没有办法让箭头显示一个

display:none

并在中与展开按钮一起设置动画？使用

display:none

无法设置动画。但是您可以使用

可见性：隐藏

代替显示：无是否将可见性：隐藏关闭右侧因箭头标记而产生的额外间隙？

.fa-animate{
 left: -15px;
 position:relative;
 opacity: 0;
 transition: 1s;
}
&:hover{
 background: blue;
 .fa-animate{
  left: 0;
  opacity:1;
 }
}