Question

Whats a simple way to fade in, HOLD for a few sec, and fade out. Code here fades in nice, just not sure how to hold.

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

Also would like a few sec delay before it starts.

Thanks!

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 Keyframes fade in HOLD and fade out

1 个答案: