Javascript 如何逐个显示背景图像？

css代码

#intro  {
        position: relative;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center top;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        text-align: center;
        padding-top: 15.6rem;
        overflow: hidden;
    }
#intro > figure {
              animation: imageAnimation 30s linear infinite 0s;
              backface-visibility: hidden;
              background-size: cover;
              background-position: center center;
              color: transparent;
              height: 100%;
              left: 0px;
              opacity: 0;
              position: absolute;
              top: 0px;
              width: 100%;
              z-index: 0;
              margin-left: 0px;
            }
#intro > figure:nth-child(1){
                            background-image: url('../images/1.jpg');
                        }
#intro > figure:nth-child(2){
                          animation-delay: 6s;
                          background-image: url('../images/2.jpg');
                        }
#intro > figure:nth-child(3){
                          animation-delay: 12s;
                          background-image: url('../images/3.jpg');
                        }

html代码：

 <section id="intro">
    <figure></figure>
    <figure></figure>
    <figure></figure>
 </section>

在这段代码中，我将一个接一个地显示背景图像，但在这里，当背景图像在第三个图像之后一个接一个地淡出时，其显示的是黑色背景。所以，我如何才能删除黑色背景我想只显示图像使用css

---

谢谢

如果没有理由避免使用jQuery插件，请尝试使用

---

看看“淡入淡出”，效果很好。

有人能帮我找到可能的重复的先生吗？你可以在我的代码中编辑吗？了解这是为了你自己的利益，所以我建议你自己试一试，如果你做不到，再回来