Javascript 按定义的时间延迟关键帧，并在动画后保持不透明度为0

我一直在使用HTML5和Css3构建一个动画横幅，但我有一些问题目前找不到解决办法

这里有一段快速代码用于示例，假设这是一个div层，并为其指定了一个图像

首先是不透明度，它一直工作到时间线动画结束，然后重新出现。有没有css方法来解决这个问题，或者我必须使用javascript

第二个是过渡延迟，我本以为我可以做一个关键帧延迟，并在每次过渡之间将其冻结几秒钟，但它从未生效。如果有人能帮忙的话，我会同意的

@-webkit关键帧动画{
0% {
不透明度：1；
-webkit动画计时功能：轻松；
-webkit转换：translateY（0px）；
}
50% {
-webkit转换延迟：10秒；
不透明度：1；
-webkit动画计时功能：轻松；
-webkit转换：translateY（300px）；
}
100% {
不透明度：0；
-webkit动画计时功能：轻松输入；
-webkit转换：translateY（900px）；
}
}
#动画{
-webkit动画延迟：0秒；
-webkit动画持续时间：6s；
-webkit动画迭代计数：无限；
-webkit动画名称：动画
}

首先是延迟命令、过渡延迟和动画延迟

*********更新***************

“不透明度”已解决，若要在动画后完成，请将第一帧0%设置为“不透明度0”。如果出现问题，请将帧设置为1%，将其设置为不透明度1

然后在你的动画末尾加上转发，我一直在用速记法，比如这样

#bannerImg {
        -webkit-animation: bannerImg-animation1 3s 0s 1 ease-in-out forwards}

---

我无法找到一种方法使代码看起来更美观，但由于从动画本身启动延迟和动画似乎不起作用，我将以下内容结合在一起：

@-webkit-keyframes animation {
   0% {
       opacity:1;
       -webkit-animation-timing-function: ease;
       -webkit-transform: translateY(0px);
   }
   18.75% {
       opacity:1;
       -webkit-animation-timing-function: ease-in;
       -webkit-transform: translateY(300px);
   }
   81.25% {
       opacity:1;
       -webkit-animation-timing-function: ease-in;
       -webkit-transform: translateY(300px);
   }
   100% {
       opacity:0;
       -webkit-animation-timing-function: ease-inout;
       -webkit-transform: translateY(900px);
   }
}
#animation {
   -webkit-animation-delay: 0s;
   -webkit-animation-duration: 16s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: animation;
}

---

此解决方案仅使用

18.75%

和

81.25%

作为延迟标记，在这段时间（10秒）内没有任何更改。

这可能有助于澄清，但对于不透明度，不透明度为0:1；因此，它将继续变得可见，并从50-100%逐渐消失。如果你想逐渐淡入，但事实并非如此，请使用100%的透明度：1；75%不透明度：0；要使其冻结，只需使动画在x%内保持不变。例如，复制100%并以80%的价格制作相同的东西。因此，在这两者之间什么也没有发生。也许有更好的办法，但我不知道。