Transition not working on text-fill-color
Transition not working on text-fill-color and I cannot figure out the issue here.
.project {
-webkit-text-fill-color: #000;
-webkit-background-clip: text;
-webkit-text-stroke: 1px #000;
transition: all ease-in 3s;
}
.project:hover {
-webkit-text-fill-color: transparent;
}<div class="project-container">
<div class="project">
Transition Not Working
</div>
<div>From the MDN documentation:
Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
I replaced -webkit-text-fill-color with color, and it seems to work just fine
.project {
color: #000;
font-size: 48px;
-webkit-background-clip: text;
-webkit-text-stroke: 1px #000;
transition: all ease-in 0.3s;
}
.project:hover {
color: transparent;
}<div class="project-container">
<div class="project">
Transition Not Working
</div>
<div>