CODEWITHSUNDEEP
css
yavgz
yavgz

Reputation: 369

css animation using background property occurs abruptly

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 ):

enter image description here

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

enter image description here

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 class="animation"></div>

Upvotes: 0

Views: 55

Answers (1)

Simran Birla
Simran Birla

Reputation: 156

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 class="animation"></div>

Upvotes: 2

Related Questions