Как создать эффект загрузки сайта с анимацией уезжающих вверх и вниз чёрных полос?

Рейтинг: 1Ответов: 1Опубликовано: 28.01.2023

Как создать такую же анимацию при загрузки сайта как здесь Hyam.

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

css html css-animation анимация loading
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Как то так?

* {
  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>