CSS 动画 : Fading images into one another and animating the image and moving it's direction

Question

我正在克隆 AirBnB 网站以练习使用 React。我正在尝试复制网站的超大屏幕及其功能。

关于 AirBnB's website超大屏幕图像逐渐消失。图像在显示的同时也慢慢向上 float 。我在模拟时遇到了问题。

我正在尝试使用这样的 CSS 关键帧:

    @keyframes fader {
  0% {
    background: url('./components/layout/images/jumbo1.jpg');
    background-size: cover;
  }
  16.67% {
    background: url('./components/layout/images/jumbo2.jpg');
    background-size: cover;
  }
  33.34% {
    background: url('./components/layout/images/jumbo3.jpg');
    background-size: cover;
  }
  50.01% {
    background: url('./components/layout/images/jumbo4.jpg');
    background-size: cover;
  }
  66.68% {
    background: url('./components/layout/images/jumbo5.jpg');
    background-size: cover;
  }
  83.35% {
    background: url('./components/layout/images/jumbo1.jpg');
    background-size: cover;
  }
  100% {
    background: url('./components/layout/images/jumbo2.jpg');
    background-size: cover;
  }
}



.wrapper {
  max-width: 100%;
  margin-top: 5em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5em;
}

.gallery {
  max-width: 100%;
  margin: 0 auto;
  animation: fader 30s linear infinite;
  height: 500px;
}

这会创建图片库并每隔几秒交换一次图片，但我无法弄清楚如何让每张图片在切换到下一张图片时淡入淡出，或者如何为图片设置动画以使其在显示时向上 float .

我该怎么做？我可以对同一元素应用多个关键帧吗？ Here如果有帮助，就是 CodeSandbox。

Answer 1

我不是 100% 确定您所说的“为图像设置动画以便在显示时向上 float ”是什么意思，但我可以与您分享我用来让图像淡入和淡出的关键帧。我希望这对你有帮助。您可以将 CSS 类应用于那部分内容，或使用您喜欢的方法来创建此关键帧。一旦您设置了淡入淡出动画，假设这不是幻灯片放映并且图像只是在加载一段时间后淡入淡出。

 @keyframes fadeinout {
    0%   { opacity:1; }
    17%  { opacity:1; }
    25%  { opacity:0; }
    92%  { opacity:0; }
    100% { opacity:1; }
}

我注意到这个问题的标题是“将图像相互淡入淡出”，如果你的意思是一个图像变成另一个图像(在 CSS 中，我们的意思是这组图像将在“彼此之上”的位置: absolute;, 你需要设置 :nth-of-type(n) 选择器来让 child 有一个动画延迟。所以如果你有一组 3 张图像你想淡出你可以使用下面的。

#slideshow img:nth-of-type(1) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
}
#slideshow img:nth-of-type(2) {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}
#slideshow img:nth-of-type(3) {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
}