Why the background fluctuating on animation using CSS?

Question

I'm using the below styling to create animated background, but the image is fluctuating/wobbling. Need a solution to keep the image steady as it changes

<div class="mydiv"></div>

.mydiv {
    width:100%;
    height:100%;
    color:black;
    animation: myanimation 20s infinite;
    }
    @keyframes myanimation {
    0% {background-image: url(../images/bg1.jpg);
    height: 1080px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    }
    25%{background-image: url(../images/bg.jpg);
    height: 1080px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: obsolute;}
    50%{background-image: url(../images/bg2.jpg);
    height: 1080px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;}
    100%{background-image: url(../images/bg3.png);
    height: 1080px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;}
}

Any Ideas to remove this will be appreciated. Thanks

Answer 1

Background image isn't a property that can be animated - you can't tween the property.

Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.

Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.

You can achieve this by modifying this code :-

HTML Code

<div id="cf4a" class="shadow">
  <img src="/images/Cirques.jpg">
  <img src="/images/Clown%20Fish.jpg">
  <img src="/images/Stones.jpg">
  <img src="/images/Summit.jpg">
</div>

CSS Code

#cf4a {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#cf4a img {
  position:absolute;
  left:0;
}

#cf4a img {
  -webkit-animation-name: cf4FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;

  -moz-animation-name: cf4FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;

  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 8s;

  animation-name: cf4FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}
#cf4a img:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}