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

Question

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

有一个问题。我的 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

你可以试试这样 0%,99%{overflow: hidden;} 100%{overflow: auto;} 我已经设置了 .container 类的固定位置以覆盖整个身体视图。
希望下面的sn-p对你有帮助

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>

Answer 2

您正在寻找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>