CSS 动画：将图像淡入另一个并为图像设置动画并移动它的方向答案

【问题标题】：CSS animations: Fading images into one another and animating the image and moving it's directionCSS 动画：将图像淡入另一个并为图像设置动画并移动它的方向
【发布时间】：2018-07-26 00:41:55
【问题描述】：

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

在AirBnB's website 上，jumbotron 图像逐渐淡入另一个。图像在显示时也会慢慢向上浮动。我无法模拟这个。

我正在尝试使用这样的 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;
}

这会创建图片库并每隔几秒钟交换一次图片，但我不知道如何让每张图片在切换到下一张图片时淡化，或者如何为图片设置动画以使其在显示时向上浮动.

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

【问题讨论】：

标签： css image carousel css-animations keyframe

【解决方案1】：

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

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

我注意到这个问题的标题是“将图像淡入另一个”，如果您的意思是一个图像更改为另一个图像（在 CSS 中，我们的意思是这组图像将位于“彼此之上”的位置： absolute;，您将需要设置 :nth-of-type(n) 选择器以在子级上产生动画延迟。因此，如果您有一组 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;
}

【讨论】：