Font Awesome Hover transition Background color

Question

I can't integrate a transition/animation coming from the top or bottom to the hover

I have my hover but no transition or animation effect when changing background

 <section class="section__menu">

            <h2 class="section__menu-title">La palette du goût <i class="far fa-heart"></i></h2>
</section>

.section__menu {
  background-color: $bg-grey;
  border-radius: 60px 60px 0 0;
  margin-top: -7em;
  &-title {
    padding: 1em 0 0 1em;
    position: relative;
    width: 100%;
    font-family: "Shrikhand", cursive;
    i {
      bottom: 0.4em;
      color: $font-black;
      cursor: pointer;
      font-size: 35px;
      position: absolute;
      right: 2em;
      transition: all .4s ease-out;
      transition-property : top;

      &:hover {
        background: linear-gradient($primary, $secondary);
        color: $font-white;
        font-weight: 600;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}