Kevin Powell - Community•13mo ago

After one cycle of animation the screen goes white, How to avoid it

https://codepen.io/stressunfit/pen/PoXdyNv Hello.., so i made this animation which transitions betweeen multiple images but after one cycle completes empty white screen fades in and out, how to avoid it?. Any kind of help would be very helpful. Thank you..

14 Replies

MarkBoots•13mo ago

the animation delays are in an interval of 3 seconds * 6 = 18 seconds. But your animation duration is 20s . so there is your 2 seconds of white

Jus Sus || 💀OP•13mo ago

Oh shit yea!, thanks!! @MarkBoots

MarkBoots•13mo ago

no problem btw, you can reduce your keyframes to

@keyframes fade {
  11.11% { opacity: 1 }
  22.22%, 94.44% { opacity: 0 }
}

@keyframes fade {
  11.11% { opacity: 1 }
  22.22%, 94.44% { opacity: 0 }
}

Jus Sus || 💀OP•13mo ago

@MarkBoots i am struggling to make this text fadein fade out animation also timming it with the banner change, can you help me please.https://www.veed.io/view/47717f36-779c-4112-b69c-0decee23ac49?panel=share

Srajan

VEED

VEED - Screen Recording - Oct 28, 2023

Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED

MarkBoots•13mo ago

a codepen would be nice again. You can update the previous one

Jus Sus || 💀OP•13mo ago

@MarkBoots hi, here is the codepen: https://codepen.io/stressunfit/pen/PoXdyNv

MarkBoots•13mo ago

you can just use the same keyframe animation

.textWrapper h2 {
  -webkit-animation: fade 18s infinite;
  animation: fade 18s infinite;
  opacity: 0;
}
.textWrapper h2:nth-child(1){ animation-delay:  0s; }
.textWrapper h2:nth-child(2){ animation-delay:  3s; }
.textWrapper h2:nth-child(3){ animation-delay:  6s; }
.textWrapper h2:nth-child(4){ animation-delay:  9s; }
.textWrapper h2:nth-child(5){ animation-delay: 12s; }
.textWrapper h2:nth-child(6){ animation-delay: 15s; }

.textWrapper h2 {
  -webkit-animation: fade 18s infinite;
  animation: fade 18s infinite;
  opacity: 0;
}
.textWrapper h2:nth-child(1){ animation-delay:  0s; }
.textWrapper h2:nth-child(2){ animation-delay:  3s; }
.textWrapper h2:nth-child(3){ animation-delay:  6s; }
.textWrapper h2:nth-child(4){ animation-delay:  9s; }
.textWrapper h2:nth-child(5){ animation-delay: 12s; }
.textWrapper h2:nth-child(6){ animation-delay: 15s; }

Jus Sus || 💀OP•13mo ago

@MarkBoots this works but looks odd in first iteration of the animation, like there is no fadein od next text while fade out of current text, like the overlap.

MarkBoots•13mo ago

yea i see what you mean. hmm. i don't have to much time right now. maybe i can look at it later. there might be a better approach

Jus Sus || 💀OP•13mo ago

@MarkBoots take your time please. Meanwhile i'll look into it aswell.

MarkBoots•13mo ago

personally i think it would be easier to use js lay all the layers on top of eachoter but only show the one with the class active. with js and a setinterval you can remove the active class from the previous one and add it to the next. in css you then can add a transition on opacity

Jus Sus || 💀OP•13mo ago

@MarkBoots I made the way you mentioned, it looks a lot better. https://codepen.io/stressunfit/pen/PoXdyNv

MarkBoots•13mo ago

this is with js (could be refined though) https://codepen.io/MarkBoots/pen/NWoxXYr

Jus Sus || 💀OP•13mo ago

@MarkBoots Thanks! it works perfectly

Gaming

Programming

After one cycle of animation the screen goes white, How to avoid it