html CSSで読み込み时にフェードイン

Posted 2021-05-10

body {
    animation: fadeIn 2s ease 0s 1 normal;
}

.wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

  <div class="wrap">テキストが入ります。</div>