Показывать HTML тело только после завершения анимации CSS (с использованием чистого css)

Question

Я создаю веб-сайт и сделал анимацию в svelte / css. Анимация dr aws из SVG и div, в котором SVG сидит внутри мух, сверху и снизу от экрана, становится невидимой. Эта анимация должна действовать как экран перехода, скрывая содержимое страницы до тех пор, пока оно не исчезнет с экрана.

Возникла проблема. Я загружаю анимацию в app.svelte и загружаю содержимое страницы в индекс. 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% {переполнение: скрыто;} 100% {переполнение: авто;} Я установил фиксированное положение класса .container, чтобы охватить весь вид тела.
Надеюсь, приведенный ниже фрагмент поможет вам много

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>