Automatic background color change

I have this code

.description {
            padding-bottom: 4%;
            text-align: center;
            animation: back_animate 25s infinite linear;
@keyframes back_animate {
            0% {
                 background: linear-gradient(-10deg, #23A6D5, #23D5AB);
               }
           10% {
                 background: linear-gradient(-10deg, #23A6D5, #EE7752);
               }
           20% {
                 background: linear-gradient(-10deg, #23A6D5, #E73C7E);
               }

what it does is change the background color automatically, but when changing color it does it all at once, I put it in transition 1s; so that changing color did it slowly but it did not help me.

what they recommend me to do

thanks