在锚标签内动画 fontawesome 图标以在悬停时飞行

Question

我需要一位 CSS/SCSS/SASS 专家来帮助我确定我在这个简单的动画中做错了什么。

目标： 我正在尝试完成一个简单的动画，其中 fontawesome 图标 fa-angle-right 在单词 onHover 之后从左侧飞入。我认为这可以通过 display: none 属性并在父属性中添加一些 transition 来完成，但它没有按预期设置动画。

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

An example of what I'm trying to do;但授予这是使用不同的 HTML 结构和 SVG 而不是 fontawesome 图标

JSFiddle：https://jsfiddle.net/bwrmam9o/1/

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>

SCSS/SASS

.btn{
  display: inline-block;
  color: #FFF;
  background: #CB5039;
  text-decoration: none;
  font-family: Arial;
  padding: 10px 12px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
  .fa-left{
    margin-right: 5px;
  }
  .fa-right{
    margin-left: 5px;
  }
  .fa-animate{
    display: none;
    transition: all 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
  }
  &:hover{
    background: blue;
    .fa-animate{
      display: inline-block;
    }
  }
}

.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #FFF 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .25s, opacity 1s;
}
.ripple:active:after {
  transform: scale(0, 0);
  opacity: .2;
  transition: 0s;
}

对此的任何帮助将不胜感激！

Answer 1

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

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

完整的编辑代码在这里：https://jsfiddle.net/jayakrishnancn/bwrmam9o/3/