仅在 CSS 动画完成后显示 HTML 正文（使用纯 css ）

Question

我正在建立一个网站，我用 svelte 制作了一个动画/css。动画绘制出一个 SVG 并且 div 位于内部的 SVG 飞到顶部并离开屏幕并变得不可见。此动画用作过渡屏幕，隐藏页面内容，直到它移出屏幕。

有问题。我在我的 app.svelte 中播放动画并在 index.html 中加载页面内容，每当动画开始时，滚轮都是可见的，这允许用户在动画完成之前简单地向下滚动。

我想知道是否有一些解决方案，例如将页面内容包装在 div 中并添加完美定时的过渡，或者更简单的方法。

我不想使用 js 或 jquery。

代码...

svg {
    width: 175px;
    height: 175px;
  }
  .container {
    background-color: #091a28;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: flyUp 2.75s forwards;
    animation-delay: 3s;
  }

  @keyframes flyUp {
    0% {
      opacity: 1;
      transform: translateX(0px);
    }

    100% {
      opacity: 0;
      transform: translateY(-2000px);
    }
  }

Answer 1

您正在查找 animationend 活动。这将在 CSS 动画完成时触发。

您可以在animationend事件的回调函数中隐藏页面内容并显示。

headerAnimated = document.getElementById("header");

headerAnimated.addEventListener('animationend', () => {
  console.log('Animation ended');
});

@keyframes headerAnimation{
    0% {background-color:red}
    50% {background-color:yellow}
    100% {background-color:black}
}

h1{
    animation:headerAnimation 5s;
}

<h1 id="header">Animation</h1>

Answer 2

你可以这样试 0%,99%{overflow: hidden;} 100%{overflow: auto;} 我已经设置固定位置 .container class 覆盖整个 body 视图。
我希望下面的代码片段能帮到你很多

svg {
  width: 175px;
  height: 175px;
  border: 2px solid #ccc;
}
.container {
  background-color: #091a28;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: flyUp 2.75s forwards;
  animation-delay: 3s;
}
 @keyframes flyUp {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
} 

/*body scrollbar hide/show*/
body {
  animation: bodyFade 3.6s forwards;
}
@keyframes bodyFade{ 
  0%,99%{overflow: hidden;}
  100%{overflow: auto;}
} 

/*For Content*/
.content{
  display: block;
  margin: 20px auto;
  width: 100%;
  max-width: 500px;
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
}

<div class="container">
  <svg></svg>
</div>

<div class="content">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <p>
  Last Line Paragraph...
 </p>
</div>

仅在 CSS 动画完成后显示 HTML 正文（使用纯 css ）

Only show HTML body after a CSS animation is complete ( using pure css )

html

css

svelte