CSS 关键帧淡入保持并淡出

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;}
 }

CSS 关键帧淡入保持并淡出

CSS Keyframes fade in HOLD and fade out

html

css

keyframe

css-animations