Wait time in a CSS keyframe

Question

On my CSS code, I use keyframes to animate my text. I would like to add a FadeOut to allow a FadeIn of the text, a display of this one during 10s then a FadeOut

setInterval(function() {

let text = document.querySelector('#text');

text.setAttribute('data-text',text.innerHTML);

document.body.innerHTML += '';

var lr = document.querySelector('html');
window.addEventListener('click',()=>{
  var newone = lr.cloneNode(true);
  lr.parentNode.replaceChild(newone, lr);
  lr = newone;
});
}, 10000);

:root {
  --color-1: #f4e874;
  --color-2: #ffb56d;
  --color-3: #ff868b;
  --color-4: #e16fb2;
  --color-5: #896ec9;
  
  --color-6: #896ec9;
  --color-7: #9165d2;
  --color-8: #9b5bda;
  --color-9: #a74ddf;
  --color-10: #b538e3;
  
  --color-11: #f4e874;
  --color-12: #f6dd63;
  --color-13: #f8d152;
  --color-14: #fac542;
  --color-15: #fdb833;
}

html { 
  height: 100%; display: flex; 
}
body { 
  margin-top: 200px; 
  overflow: hidden;
}

@import url('https://fonts.googleapis.com/css?family=Work+Sans:800');

#text {
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  font-size: 7vw;
  transform:skewY(-5deg);
  visibility:hidden;
  background: linear-gradient(219deg, 
    var(--color-1) 19%, 
    transparent 19%,transparent 20%, 
    var(--color-2) 20%, var(--color-2)  39%,
    transparent 39%,transparent 40%, 
    var(--color-3) 40%,var(--color-3) 59% ,
    transparent 59%,transparent 60%, 
    var(--color-4) 60%, var(--color-4) 79%,
    transparent 79%, transparent 80%, 
    var(--color-5) 80%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation : display 1s cubic-bezier(.6,.0,.15,1) 4s forwards;
  position: relative;
  }
  
  #text:before,
  #text:after {
    content: attr(data-text);
    visibility: visible;
  background: linear-gradient(219deg, 
    var(--color-6) 19%, 
    transparent 19%,transparent 20%, 
    var(--color-7) 20%, var(--color-7)  39%,
    transparent 39%,transparent 40%, 
    var(--color-8) 40%,var(--color-8) 59% ,
    transparent 59%,transparent 60%, 
    var(--color-9) 60%, var(--color-9) 79%,
    transparent 79%, transparent 80%, 
    var(--color-10) 80%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;    
    position: absolute;
    left: 0;
    display: block;
    top: 0;
    bottom: 0;
    z-index: 3;
  }
  
  #text:before {
  background: linear-gradient(219deg, 
    var(--color-6) 19%, 
    transparent 19%,transparent 20%, 
    var(--color-7) 20%, var(--color-7)  39%,
    transparent 39%,transparent 40%, 
    var(--color-8) 40%,var(--color-8) 59% ,
    transparent 59%,transparent 60%, 
    var(--color-9) 60%, var(--color-9) 79%,
    transparent 79%, transparent 80%, 
    var(--color-10) 80%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    animation: move-left 2.5s cubic-bezier(.6,.0,.15,1),
               blur 1s linear 3s forwards;
  }
  
  #text:after {
  background: linear-gradient(219deg, 
    var(--color-11) 19%, 
    transparent 19%,transparent 20%, 
    var(--color-12) 20%, var(--color-12)  39%,
    transparent 39%,transparent 40%, 
    var(--color-13) 40%,var(--color-13) 59% ,
    transparent 59%,transparent 60%, 
    var(--color-14) 60%, var(--color-14) 79%,
    transparent 79%, transparent 80%, 
    var(--color-15) 80%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    animation: move-right 3s cubic-bezier(.6,.0,.15,1),
               blur 1s linear 3s forwards;
  }
  
  @keyframes move-left{
    from{
      transform:translate(-1000%,-120%);
    }50%{
      transform:translate(0%,-120%);
    }
    100%{
      transform:translate(0%,0%);
    }
  }
  
  @keyframes move-right{
    from{
      transform:translate(1000%,80%);
    }50%{
      transform:translate(0%,80%);
    }100%{
      transform:translate(0%,0%);
    }
  }
  
  @keyframes blur{
    from{
      opacity:1;
    }
    to{
      opacity: 0;
    }
  }
  
  @keyframes display{
    from{
      visibility: hidden;
      transform:skewY(-5deg) scale(0);
    }to{
      visibility: visible;
      transform:skewY(-5deg) scale(1);
    }
  }
 

<div id ="text">LE LIVE VA COMMENCER</div>

I would like this animation to be present on my "display" keyframe (visible in the snippet)

So I tried to replace

@keyframes display{
    from{
      visibility: hidden;
      transform:skewY(-5deg) scale(0);
    }to{
      visibility: visible;
      transform:skewY(-5deg) scale(1);
    }
  }

to

@keyframes display{
    0%{
      visibility: hidden;
      transform:skewY(-5deg) scale(0);
    }50%{
      visibility: visible;
      transform:skewY(-5deg) scale(1);
    } 1000%{
      visibility: hidden;
      transform:skewY(-5deg) scale(0);
    }
  }

But the text disappears in fadeOut directly after it appears.

How should I make my keyframe in order to have a waiting time of about 10 seconds between the fadeIn and fadeOut?

Thank you!

Answer 1

You can make one keyframes for fade in and one for fade out, then set an animation delay on the fade out.

animation-name: fade-in, fade-out;
animation-duration: 3s;
animation-delay: 0ms, 9000ms;

If you really want to have it in the same animation you have to calculate it with the percentage and the animation-duration.