フェードインしてくる文字の表示

ページにアクセスした時に特定の文字がフェードインしてくるcssの記述です。translate3d(0,-100%,0);の部分はy軸に-100%移動するという意味です。

style.css

h1 {
  visibility: visible;
  animation: fadeInDown 1s ease 0.5s 1 normal;
  -webkit-animation: fadeInDown 1s ease 0.5s 1 normal;
  animation-fill-mode: both;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0,-100%,0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0,-100%,0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}