Seems like you can finally animate gradient colours in CSS. It is a bit finicky, though, using CSS custom properties.
@property --gradient-bg {
syntax: '<color>';
inherits: false;
}
h5:after {
/* snip */
--gradient-bg: var(--background);
background-image: linear-gradient(to right, transparent, var(--gradient-bg));
}
h5:after:hover {
--gradient-bg: var(--brand-2);
}