为什么背景在使用 CSS 的动画上波动？

Question

我正在使用以下样式创建动画背景，但图像是 fluctuating/wobbling。需要一个解决方案来在图像变化时保持图像稳定

<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;}
}

任何删除它的想法将不胜感激。谢谢

Answer 1

背景图片 isn't a property that can be animated - 你不能补间属性。

相反，尝试使用 position:absolute 将所有图像布置在彼此之上，然后将所有图像的不透明度动画设置为 0，但您想要的图像除外。

您可以通过修改此代码来实现：-

HTML代码

<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代码

#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;
}

为什么背景在使用 CSS 的动画上波动？

Why the background fluctuating on animation using CSS?

html

css

background-image

keyframe

css-animations