CSS 关键帧淡入 HOLD 淡出

Question

什么是淡入的简单方法，按住几秒钟，然后淡出。这里的代码很好地淡入淡出，只是不知道如何保存。

HTML

<div class="arrow_case"></div>

CSS

.arrow_case {
   width: 100%;
   height: 20vh;
   opacity: 0;
   animation-delay: 1s;
   -webkit-animation: arrowInOut 4s linear forwards;
   animation: arrowInOut 4s linear forwards;
}

@-webkit-keyframes arrowInOut {
   0%,100% {opacity: 0;}
   50% {opacity: 1;}
}
@keyframes arrowInOut {
   0%,100% {opacity: 0;}
   50% {opacity: 1;}
}

还想在启动前延迟几秒。

谢谢！

Answer 1

您可以稍微修改您的代码以获得淡入、保持和淡出效果。这是您修改后的代码。

.arrow_case {
 width: 100%;
 height: 20vh;
 opacity: 0;
 animation-delay: 1s;
 -webkit-animation: arrowInOut 8s linear forwards;
 animation: arrowInOut 8s linear forwards;
}

@-webkit-keyframes arrowInOut {
 0%,100% {opacity: 0;}
 30%, 80% {opacity: 1;}
}
@keyframes arrowInOut {
 0%,100% {opacity: 0;}
 30%, 80% {opacity: 1;}
 }