Animation

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

by akogch

HTML

<div class="container">
  <h1>Заголовок</h1>
  <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p>
  <img src="https://placeimg.com/640/480/any">
</div>

CSS

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

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

.container img {
  width: 340px;
  /* height: 480px; */
}

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