html - 动画 anchor 标记内的 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/