Animation

Анимационное появление страницы снизу вверх. Простой понятный код css — @keyframes

by akogch

HTML

<div class="container">
  <h1>Заголовок</h1>
  <p>
    Текст текст текст текст текст текст текст текст текст текст текст текст
    текст текст текст
  </p>
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>

CSS

body {
  width: 100vw;
  height: 100vh;
  /* overflow: hidden; */
}

.container {
  animation: 1.5s ease-out 0s 1 slideUp;
  width: 100vw;
  height: 100vh;
}

.container img {
  width: 200px;
  height: 100px;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}