틀:ASU/Loading/styles.css

.ACLoadingImage {
    animation: ACLoadingImage;
    animation-iteration-count: 4;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
 }

  @keyframes ACLoadingImage {
    0% {background-image:linear-gradient(to top, white 100%, transparent 100%);}
    10% {background-image:linear-gradient(to top, white 99%, transparent 99%);}
    20% {background-image:linear-gradient(to top, white 98%, transparent 98%);}
    30% {background-image:linear-gradient(to top, white 97%, transparent 97%);}
    40% {background-image:linear-gradient(to top, white 77%, transparent 77%);}
    50% {background-image:linear-gradient(to top, white 60%, transparent 60%);}
    60% {background-image:linear-gradient(to top, white 55%, transparent 55%);}
    70% {background-image:linear-gradient(to top, white 25%, transparent 25%);}
    80% {background-image:linear-gradient(to top, white 2%, transparent 2%);}
    90% {background-image:linear-gradient(to top, white 1%, transparent 1%);}
    100% {background-image:linear-gradient(to top, white 0.5%, transparent 0.5%);}
  }

  .ACLoadingPage {
    display:inherit;
    z-index:5;
    animation: ACLoadingPage;
    animation-delay: 5s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    overflow:hidden;
    height:100vh;
    opacity:1;
   }

   @keyframes ACLoadingPage {
    from {height:100vh;opacity:1; z-index:5;display:inherit;}
    to {height:0px;opacity:0; z-index:-1;display:none;}
  }

@media screen and (min-width: 450px) {
	.ACLoading-WebDisplay {
    	display:inherit;
	}
}
@media screen and (min-width: 450px) {
	.ACLoading-MobileDisplay {
    	display:none;
	}
}
@media screen and (max-width: 450px) {
	.ACLoading-WebDisplay {
    	display:none;
	}
}
@media screen and (max-width: 450px) {
	.ACLoading-MobileDisplay {
    	display:inherit;
	}
}