fade-in/fade-out 特定位置 css 中的图片库

Question

我有一个fiddle，如下图所示，其中位置4（用黄色圆圈标记）从左边开始，其中图6 正在显示，我希望 cross-fade(fade-in/fade-out) 图片库发生。

在位置4，我想要淡入淡出(fade-in/fade-out) of 3张图片(图4，图5，图6) 发生。

https://jsfiddle.net/k0vzthne/embedded/result

这是我用过的CSS代码。目前，我没有看到位置 4 上有任何交叉淡入淡出 (fade-in/fade-out) 图片库。

.featured-block a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
  position: absolute;
  right: 568px;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  opacity: 0;
}

.featured-block a:nth-of-type(4) {
  animation-delay: 0s;
}

.featured-block a:nth-of-type(5) {
  animation-delay: 4s;
}


.featured-block a:nth-of-type(6) {
  animation-delay: 8s;
}

@keyframes cf4FadeInOut {
    0% {opacity: 0;}
    20% {opacity: 1;z-index: 999;}
    33% {opacity: 1;}
    53% {opacity: 0;z-index: 1;}
    100% {opacity: 0;}
}

问题陈述：

我想知道我应该在 fiddle 中进行哪些更改，以便在位置 4 处出现 3 张图像中的 fade-in/fade-out。

Answer 1

您需要指定动画名称：

.featured-block a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
  position: absolute;
  right: 568px;
  animation: 12s infinite ease-in-out cf4FadeInOut;
  opacity: 0;
}

看看here

编辑：

显示顺序问题的关键是使用负动画延迟：

.featured-block a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
  position: absolute;
  right: 568px;
  animation: 12s infinite ease-in-out cf4FadeInOut;
  opacity:0;
}

.featured-block a:nth-of-type(4) {
  animation-delay: -4s;
}

.featured-block a:nth-of-type(5) {
  animation-delay: 0s;
}

.featured-block a:nth-of-type(6) {
  animation-delay: 4s;
}

@keyframes cf4FadeInOut {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

拍一张look

Answer 2

显示存在问题：如所述here。

考虑到这一点，这是我的答案：

.featured-block {width: 1000px;}
.featured-block a { display: inline-block; opacity: 1;}

a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) { 
  position: absolute; 
  animation: 12s infinite ease-in-out cf4FadeInOut;
  opacity: 0;
  z-index:1;
}

.featured-block a:nth-of-type(4) { animation-delay: 0s; }
.featured-block a:nth-of-type(5) { animation-delay: 4s; }
.featured-block a:nth-of-type(6) { animation-delay: 8s; }

@keyframes cf4FadeInOut {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

<div class="featured-block">
  
  <a href="https://www.google.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%201" data-fallback-img="https://via.placeholder.com/200x100?text=picture%201" alt="Outburst">
      </figure>
    </div>
  </a>
  
  <a href="https://www.facebook.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%202" data-fallback-img="https://via.placeholder.com/200x100?text=picture%202" 
  alt="L'Essentiel with Esther Bégin">
      </figure>
    </div>
  </a>
  
  <a href="https://www.linkedin.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%203" data-fallback-img="https://via.placeholder.com/200x100?text=picture%203" alt="Outburst">
      </figure>
    </div>
  </a>
  
  <a href="https://www.twiiter.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%204" data-fallback-img="https://via.placeholder.com/200x100?text=picture%204" alt="L'Essentiel with Esther Bégin">
      </figure>
    </div>
  </a>
  
   <a href="https://www.amazon.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%205" data-fallback-img="https://via.placeholder.com/200x100?text=picture%205" alt="Outburst">
      </figure>
    </div>
  </a>
  
  <a href="https://www.expedia.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%206" data-fallback-img="https://via.placeholder.com/200x100?text=picture%206" alt="L'Essentiel with Esther Bégin">
      </figure>
    </div>
  </a>

</div>

fade-in/fade-out 特定位置 css 中的图片库

fade-in/fade-out gallery of images in css at particular position

html

css

fadeout

fadein

css-animations