css - 我如何只使用 CSS 为横幅制作动画，时间轴搞砸了

Question

我正在尝试仅使用 CSS 而非 JS 创建横幅。如果我使用诸如 GreenSock 或 Create 之类的 JS 库来设置时间会更容易，但我不知道如何仅使用关键帧来完成。

我尝试设置元素的不透明度以显示下面的元素，但没有成功。

    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.banner{
    position: relative;
    width: 100vw;
}

.first {
    background-color: black;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

@keyframes first {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
  }

.first img {
    width: 90%;
    position: absolute;
    object-fit: contain;
    top: 30%;
    animation-name: first-screen;
    animation-duration: 2s;
    animation-timing-function: ease;
}

.bg {
width: 100vw;
height: 100vh;
margin-top: -10%;
 overflow: hidden;
 object-fit: cover;
 object-position: center;
 animation-name: bg;
 animation-duration: 3s;
 animation-delay: 2s;
}

@keyframes bg {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

.offer{
    display: flex;
    width: 100vw;
    object-fit: contain;
    position: fixed;
    bottom:0
}

.copy {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    animation-name: copy;
    animation-duration: 3s;
    animation-delay: 2s;

}

@keyframes copy {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
  }


.headline {
    width: 70%;
    position: absolute;
    object-fit: contain;
    top: 10%;
}

.subheadline {
    width: 70%;
    position: absolute;
    object-fit: contain;
    top: 22%;
}

我需要第一个屏幕淡入，该屏幕需要显示两秒然后淡出，然后背景会立即淡入并持续三秒钟，同时副本也会以不同的速度淡入。在这种情况下，除了背景之外，我的所有元素最终都显示在动画结束时。

这是 html:

                <div class="first-screen"><img src="img/1st_frame.jpg"/></div>
                <div class="copy">
                    <img src="img/headline.png" class="headline"/>
                    <img src="img/subheadline.png" class="subheadline" />
                </div>
                <img src="img/offer.png" class="offer" />
                <img src="img/bg.jpg" class="bg"/>  

Answer 1

我通过为所有动画设置相同的持续时间然后使用百分比来显示和隐藏元素来修复它，但仍然有一些元素应该同时显示和淡出并且具有不同的时间，即使 CSS关键帧和属性是相同的。 bg 和标题应该同时淡出，而不是只有标题淡出。有谁知道为什么吗？

html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.interstitial {
    position: relative;
    width: 100vw;
}

.first {
    background-color: black;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.first img {
    width: 90%;
    position: absolute;
    object-fit: contain;
    top: 30%;
    animation-name: first-screen;
    animation-duration: 5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes first {
    0% {
        opacity: 0.5;
    }

    20% {
        opacity: 1;
    }

    40% {
        opacity: 0
    }

    100% {
        opacity: 0;
    }
}

.bg {
    width: 100vw;
    height: 100vh;
    margin-top: -20%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    animation-name: bg;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    z-index: 0
}

@keyframes bg {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.offer {
    display: flex;
    width: 100vw;
    object-fit: contain;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.copy {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    animation-name: headlines;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;

}

@keyframes headlines {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.headline {
    width: 70%;
    position: absolute;
    object-fit: contain;
    top: 10%;
}

.subheadline {
    width: 70%;
    position: absolute;
    object-fit: contain;
    top: 22%;
}