Text overflow gradient - transition is not smooth when hover is off - css

Question

I have a dropdown where the overflow text is gradient out. There's transition applied to the selection's wrapper but now it looks a bit odd when it's hovered out. How can I make it look better?
html snippet:
<div class="durationDropdown">
<select role="listbox" class="durationSelect">
<option value="0">Less than 1 month</option>
</select>
</div>
css snippet:
.container {
width: 150px;
}
.durationDropdown {
padding: 0px;
flex: 1;
text-align: left;
position: relative;
cursor: pointer;
height: 5.1875rem;
transition: 250ms;
border: 1px solid #eee;
}
.durationDropdown::after {
content: "";
display: block;
width: 40px;
top: 0%;
right: 0;
height: 100%;
position: absolute;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 63%);
pointer-events: none;
}
.durationDropdown:hover::after,
.durationDropdown:active::after {
background: none;
}
.durationDropdown:hover {
background: black;
}
Here's my fiddle where you can see how it looks like and the rest of the css in the fiddle. Any help/suggestions would be great!

Answer 1

I am afraid you cannot add transition to the gradient, see details here Use CSS3 transitions with gradient backgrounds.
What you really see it's smooth changing of the 'color' property but not the gradient transition. If you want to hide a part of the sentence with a gradient and have a smooth transition on it, you could do like so:
Add transition to 'durationDropdown::after' element and replace 'background: none;' by 'opacity: 0;' like so:
.durationDropdown::after {
...
transition: 250ms opacity ease-in-out;
...
}
.durationDropdown:hover::after,
.durationDropdown:active::after {
/* background: none; */
opacity: 0;
}