틀:ASU/Loading/styles.css: 두 판 사이의 차이

2023년 9월 30일 (토) 21:44 판

.ACLoadingImage {
    animation: ACLoadingImage;
    animation-iteration-count: 1;
    animation-duration: 3s;
    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 100%);}
  20% {background-image:linear-gradient(to top, white 98%, transparent 100%);}
  30% {background-image:linear-gradient(to top, white 97%, transparent 100%);}
  40% {background-image:linear-gradient(to top, white 77%, transparent 100%);}
  50% {background-image:linear-gradient(to top, white 60%, transparent 100%);}
  60% {background-image:linear-gradient(to top, white 55%, transparent 100%);}
  70% {background-image:linear-gradient(to top, white 25%, transparent 100%);}
  80% {background-image:linear-gradient(to top, white 2%, transparent 100%);}
  90% {background-image:linear-gradient(to top, white 1%, transparent 100%);}
  100% {background-image:linear-gradient(to top, white 0.5%, transparent 100%);}
  }

  .IM-POLD-LDtext1 {
    animation: IM-POLD-LDtext1;
    animation-iteration-count: 2;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    opacity:1;
   }
   
   @keyframes IM-POLD-LDtext1 {
     from {opacity:1;}
     50% {opacity:0;}
     to {opacity:1;}
   }

  .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;
	}
}