When I apply a transition to the heart, it inexplicably turns black at the start of the animation before displaying the intended gradient effect.
Below is the code snippet:
.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 class="fa-regular fa-heart heart"></span>I'm trying to figure out why there is a black background at the beginning of the transition. I've experimented with different solutions, like adding a background-color property, but so far, nothing has resolved the issue.
Thank you for any help you can provide.
Update: I have adjusted the transition duration from .9s to 5s to highlight the problem more clearly. Adding color to the element does not eliminate the issue; the heart should maintain a black outline when the cursor is not hovering over it.