css animation using background property occurs abruptly-CodePudding

I am trying to achieve the effect of this image (the gif doesn't look very good :/ but basically there is a smooth transition where it changes from one color to another and back ):

this is my output (it looks like it makes the transition but abruptly starts again):

I have to achieve it using a total animation time of 1000ms and ease-out. I don't know what I'm doing wrong, but I can't get my animation to look the same. my animation doesn't look the same as the gif, it looks a bit jerky

what is my problem?

html,body{
 height:100%;
 width:100%;
 padding:0px;
 margin:0px;
}


.animation {
    width: 100%;
    height: 100%;
    animation: animationSkeleton 1000ms infinite forwards ease-out;
    animation-delay: 1ms;
}


@keyframes animationSkeleton {
    0% {
        background: #f6f6f6;
    }
    100% {
        background: #d8dada;
    }
}

<div ></div>

CodePudding user response：

This may solve your problem

html,body{
 height:100%;
 width:100%;
 padding:0px;
 margin:0px;
}


.animation {
    width: 100%;
    height: 100%;
    animation: animationSkeleton 1000ms infinite alternate ease-out;
    animation-delay: 1ms;
}


@keyframes animationSkeleton {
    0% {
        background: #f6f6f6;
    }
    100% {
        background: #d8dada;
    }
}

<div ></div>