Анимация при загрузки сайта HTML CSS

Question

Подскажите пожалуйста как создать такую же анимацию при загрузки сайта как здесь Hyam. Без надписи, чтобы при открытие сайта анимировнно верхняя часть чёрной полосы уезжала вверх, а нижняя вниз. Желательно только на HTML и CSS. Зарание спасибо!

Answer 1

Как то так?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#loading-screen::before, #loading-screen::after {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0);
  width: 100vw;
  height: 100vh;
  display: block;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-duration: 1.5s;
  animation-delay: .1s;
}

#loading-screen::before {
  animation-name: loadingScreen1;
}

#loading-screen::after {
  animation-name: loadingScreen2;
}

@keyframes loadingScreen1 {
  to {
    transform: translateY(-100%);
  }
}

@keyframes loadingScreen2 {
  to {
    transform: translateY(100%);
  }
}

<div id="loading-screen"></div>

<h1>Hello, World!</h1>
<p>Lorem ipsum dolor sit amet</p>

БЛОГ НА HUSL

Анимация при загрузки сайта HTML CSS

Ответы (1 шт):