CSS transition have a black background at the beginning, why?-CodePudding

I have a transition on the heart, but for some reason, at the beginning of the animation, it turns black first before doing the desired gradient.

Here is the code:

.heart {
     font-size: 2.5rem;
     padding-right: 2rem;
     }

.heart:hover::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f004";
  background-image: linear-gradient(#9356DC, #FF79DA);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: 5s ease-in-out;
  cursor: pointer;
  }

<link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        />
<span ></span>

I would like to understand where this black background comes from at the beginning of the transition.

I tried different things, like adding a background-color property. But it doesn't solve the problem.

Thanks a lot in advance

Edit : I changed the duration of the transition from .9s to 5s to make it clear what I mean. Putting color on the element does not solve the problem, the heart must have a black outline when the cursor is not on it.

CodePudding user response：

I think this is what you are looking for, correct? Similar to a like button on Instagram. I've achieved this by creating a second pseudo-element ::after with the same styling as the before on hover. Now on hover I change the opacity of the before to 0 and the after to 1, with a transition, this fades over to each other nicely. It is required to give the .heart element position relative so the after can be positioned directly over the before

.heart {
  position: relative;
  font-size: 2.5rem;
  font-weight: 400;
}
.heart::before {
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
.heart::after {
  position:absolute;
  left: 0;
  transition: 0.3s ease-in-out;
  content: "\f004";
  background-image: linear-gradient(#9356DC, #FF79DA)!important;
  font-weight: 600;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
  cursor: pointer;
  
}

.heart:hover::before {
  opacity: 0;
}
.heart:hover::after {
  opacity: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

<span ></span>

CodePudding user response：

.heart {
  font-size: 2.5rem;
  padding-right: 2rem;
  /* ADD These line of code */
  background: linear-gradient(#9356DC, #FF79DA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heart:hover::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f004";
  background-image: linear-gradient(#9356DC, #FF79DA);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: 0.9s ease-in-out;
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

<span ></span>