홈페이지 로딩 시 위에서 아래로 fadeIn 되는 효과

<style>
 .fadeIn {
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
  -ms-animation: fadein 2s;  /* Internet Explorer */
  -o-animation: fadein 2s; /* Opera < 12.1 */
   animation: fadein 2s;
 }
 
 @keyframes fadein {
  from { 
    opacity: 0;
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
 }
 </style>

<div class="fadeIn">Fade In 효과 </div>