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!

CodePudding user response：

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.