Why does this animation start not to have transition when I add a linear gradient over it?

Question

I'm trying to set background images with smooth transition on my hero page, the problem is when I add linear gradient over the images the transition becomes sharp (0s transition). here is the code...

.hero{
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(167, 45, 167, .3), rgba(167, 45, 167, .3)), url(img/main-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation-name: hero-a;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

@keyframes hero-a{
    0%{
        background: linear-gradient(rgba(167, 45, 167, .3), rgba(167, 45, 167, .3)), url(img/main-bg.jpg);
        background-position: center;
        background-size: cover;
    }
    20%{
        background: linear-gradient(rgba(167, 45, 167, .3), rgba(167, 45, 167, .3)), url(img/alt-bg-2.jpg);
        background-position: center;
        background-size: cover;
    }
    40%{
        background: linear-gradient(rgba(167, 45, 167, .3), rgba(167, 45, 167, .3)), url(img/alt-bg-3.jpg);
        background-position: center;
        background-size: cover;
    }
    60%{
        background: linear-gradient(rgba(167, 45, 167, .3), rgba(167, 45, 167, .3)), url(img/alt-bg-4.jpg);
        background-position: center;
        background-size: cover;
    }
    80%{
        background: linear-gradient(rgba(167, 45, 167, .3), rgba(167, 45, 167, .3)), url(img/alt-bg-5.jpg);
        background-position: center;
        background-size: cover;
    }
}