Animation of linear gradient using css variables (Chrome)

Question

I read that it's possible to animate linear gradient using variables, although it's not working in most of the browsers. So far in Chrome, I've managed to make gradient switch between one of the colors, but not fluently. So is it possible to do this using only CSS ?

.blade {
background: linear-gradient(170deg, var(--color1) 40%, grey);
--color1 : black;
animation: bladea 5s ease infinite; }

@keyframes bladea {
    0% {--color1: black;}
    25% {--color1: grey;}
    50% {--color1: white;}
    100% {--color1: black;}
}

 <div class="blade">lorem</div>