CSS 关键帧的等待时间

Question

在我的 CSS 代码中，我使用关键帧为文本设置动画。我想添加一个 FadeOut 以允许文本的 FadeIn，在 10 秒内显示这个，然后 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>

我希望此动画出现在我的“显示”关键帧上（在代码段中可见）

所以我尝试替换

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

到

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

但是文字出现后直接在fadeOut中消失

我应该如何制作关键帧才能在淡入和淡出之间有大约 10 秒的等待时间？

谢谢！

Answer 1

您可以制作一个淡入关键帧和淡出关键帧，然后在淡出时设置动画延迟。

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

如果你真的想在同一个动画中使用它，你必须用百分比和 animation-duration 来计算它。

CSS 关键帧的等待时间

Wait time in a CSS keyframe

css

css-animations

keyframe