틀:ASU/Loading/styles.css 문서 원본 보기

/* 로딩바 */
.ACLoadingImage {
    animation: ACLoadingImage;
    animation-iteration-count: 1;
    animation-duration: 2.9s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    background-image:linear-gradient(to right, #a1a7bb 0.5%, transparent 0.5%);
}
  @keyframes ACLoadingImage {
0% {
    background-image: linear-gradient(to right, #89d123 0%, transparent 0%);
}
1% {
    background-image: linear-gradient(to right, #89d123 1%, transparent 1%);
}
2% {
    background-image: linear-gradient(to right, #89d123 2%, transparent 2%);
}
3% {
    background-image: linear-gradient(to right, #89d123 3%, transparent 3%);
}
4% {
    background-image: linear-gradient(to right, #89d123 4%, transparent 4%);
}
5% {
    background-image: linear-gradient(to right, #89d123 5%, transparent 5%);
}
6% {
    background-image: linear-gradient(to right, #89d123 6%, transparent 6%);
}
7% {
    background-image: linear-gradient(to right, #89d123 7%, transparent 7%);
}
8% {
    background-image: linear-gradient(to right, #89d123 8%, transparent 8%);
}
9% {
    background-image: linear-gradient(to right, #89d123 9%, transparent 9%);
}
10% {
    background-image: linear-gradient(to right, #89d123 10%, transparent 10%);
}
11% {
    background-image: linear-gradient(to right, #89d123 11%, transparent 11%);
}
12% {
    background-image: linear-gradient(to right, #89d123 12%, transparent 12%);
}
13% {
    background-image: linear-gradient(to right, #89d123 13%, transparent 13%);
}
14% {
    background-image: linear-gradient(to right, #89d123 14%, transparent 14%);
}
15% {
    background-image: linear-gradient(to right, #89d123 15%, transparent 15%);
}
16% {
    background-image: linear-gradient(to right, #89d123 16%, transparent 16%);
}
17% {
    background-image: linear-gradient(to right, #89d123 17%, transparent 17%);
}
18% {
    background-image: linear-gradient(to right, #89d123 18%, transparent 18%);
}
19% {
    background-image: linear-gradient(to right, #89d123 19%, transparent 19%);
}
20% {
    background-image: linear-gradient(to right, #89d123 20%, transparent 20%);
}
21% {
    background-image: linear-gradient(to right, #89d123 21%, transparent 21%);
}
22% {
    background-image: linear-gradient(to right, #89d123 22%, transparent 22%);
}
23% {
    background-image: linear-gradient(to right, #89d123 23%, transparent 23%);
}
24% {
    background-image: linear-gradient(to right, #89d123 24%, transparent 24%);
}
25% {
    background-image: linear-gradient(to right, #89d123 25%, transparent 25%);
}
26% {
    background-image: linear-gradient(to right, #89d123 26%, transparent 26%);
}
27% {
    background-image: linear-gradient(to right, #89d123 27%, transparent 27%);
}
28% {
    background-image: linear-gradient(to right, #89d123 28%, transparent 28%);
}
29% {
    background-image: linear-gradient(to right, #89d123 29%, transparent 29%);
}
30% {
    background-image: linear-gradient(to right, #89d123 30%, transparent 30%);
}
31% {
    background-image: linear-gradient(to right, #89d123 31%, transparent 31%);
}
32% {
    background-image: linear-gradient(to right, #89d123 32%, transparent 32%);
}
33% {
    background-image: linear-gradient(to right, #89d123 33%, transparent 33%);
}
34% {
    background-image: linear-gradient(to right, #89d123 34%, transparent 34%);
}
35% {
    background-image: linear-gradient(to right, #89d123 35%, transparent 35%);
}
36% {
    background-image: linear-gradient(to right, #89d123 36%, transparent 36%);
}
37% {
    background-image: linear-gradient(to right, #89d123 37%, transparent 37%);
}
38% {
    background-image: linear-gradient(to right, #89d123 38%, transparent 38%);
}
39% {
    background-image: linear-gradient(to right, #89d123 39%, transparent 39%);
}
40% {
    background-image: linear-gradient(to right, #89d123 40%, transparent 40%);
}
41% {
    background-image: linear-gradient(to right, #89d123 41%, transparent 41%);
}
42% {
    background-image: linear-gradient(to right, #89d123 42%, transparent 42%);
}
43% {
    background-image: linear-gradient(to right, #89d123 43%, transparent 43%);
}
44% {
    background-image: linear-gradient(to right, #89d123 44%, transparent 44%);
}
45% {
    background-image: linear-gradient(to right, #89d123 45%, transparent 45%);
}
46% {
    background-image: linear-gradient(to right, #89d123 46%, transparent 46%);
}
47% {
    background-image: linear-gradient(to right, #89d123 47%, transparent 47%);
}
48% {
    background-image: linear-gradient(to right, #89d123 48%, transparent 48%);
}
49% {
    background-image: linear-gradient(to right, #89d123 49%, transparent 49%);
}
50% {
    background-image: linear-gradient(to right, #89d123 50%, transparent 50%);
}
51% {
    background-image: linear-gradient(to right, #89d123 51%, transparent 51%);
}
52% {
    background-image: linear-gradient(to right, #89d123 52%, transparent 52%);
}
53% {
    background-image: linear-gradient(to right, #89d123 53%, transparent 53%);
}
54% {
    background-image: linear-gradient(to right, #89d123 54%, transparent 54%);
}
55% {
    background-image: linear-gradient(to right, #89d123 55%, transparent 55%);
}
56% {
    background-image: linear-gradient(to right, #89d123 56%, transparent 56%);
}
57% {
    background-image: linear-gradient(to right, #89d123 57%, transparent 57%);
}
58% {
    background-image: linear-gradient(to right, #89d123 58%, transparent 58%);
}
59% {
    background-image: linear-gradient(to right, #89d123 59%, transparent 59%);
}
60% {
    background-image: linear-gradient(to right, #89d123 60%, transparent 60%);
}
61% {
    background-image: linear-gradient(to right, #89d123 61%, transparent 61%);
}
62% {
    background-image: linear-gradient(to right, #89d123 62%, transparent 62%);
}
63% {
    background-image: linear-gradient(to right, #89d123 63%, transparent 63%);
}
64% {
    background-image: linear-gradient(to right, #89d123 64%, transparent 64%);
}
65% {
    background-image: linear-gradient(to right, #89d123 65%, transparent 65%);
}
66% {
    background-image: linear-gradient(to right, #89d123 66%, transparent 66%);
}
67% {
    background-image: linear-gradient(to right, #89d123 67%, transparent 67%);
}
68% {
    background-image: linear-gradient(to right, #89d123 68%, transparent 68%);
}
69% {
    background-image: linear-gradient(to right, #89d123 69%, transparent 69%);
}
70% {
    background-image: linear-gradient(to right, #89d123 70%, transparent 70%);
}
71% {
    background-image: linear-gradient(to right, #89d123 71%, transparent 71%);
}
72% {
    background-image: linear-gradient(to right, #89d123 72%, transparent 72%);
}
73% {
    background-image: linear-gradient(to right, #89d123 73%, transparent 73%);
}
74% {
    background-image: linear-gradient(to right, #89d123 74%, transparent 74%);
}
75% {
    background-image: linear-gradient(to right, #89d123 75%, transparent 75%);
}
76% {
    background-image: linear-gradient(to right, #89d123 76%, transparent 76%);
}
77% {
    background-image: linear-gradient(to right, #89d123 77%, transparent 77%);
}
78% {
    background-image: linear-gradient(to right, #89d123 78%, transparent 78%);
}
79% {
    background-image: linear-gradient(to right, #89d123 79%, transparent 79%);
}
80% {
    background-image: linear-gradient(to right, #89d123 80%, transparent 80%);
}
81% {
    background-image: linear-gradient(to right, #89d123 81%, transparent 81%);
}
82% {
    background-image: linear-gradient(to right, #89d123 82%, transparent 82%);
}
83% {
    background-image: linear-gradient(to right, #89d123 83%, transparent 83%);
}
84% {
    background-image: linear-gradient(to right, #89d123 84%, transparent 84%);
}
85% {
    background-image: linear-gradient(to right, #89d123 85%, transparent 85%);
}
86% {
    background-image: linear-gradient(to right, #89d123 86%, transparent 86%);
}
87% {
    background-image: linear-gradient(to right, #89d123 87%, transparent 87%);
}
88% {
    background-image: linear-gradient(to right, #89d123 88%, transparent 88%);
}
89% {
    background-image: linear-gradient(to right, #89d123 89%, transparent 89%);
}
90% {
    background-image: linear-gradient(to right, #89d123 90%, transparent 90%);
}
91% {
    background-image: linear-gradient(to right, #89d123 91%, transparent 91%);
}
92% {
    background-image: linear-gradient(to right, #89d123 92%, transparent 92%);
}
93% {
    background-image: linear-gradient(to right, #89d123 93%, transparent 93%);
}
94% {
    background-image: linear-gradient(to right, #89d123 94%, transparent 94%);
}
95% {
    background-image: linear-gradient(to right, #89d123 95%, transparent 95%);
}
96% {
    background-image: linear-gradient(to right, #89d123 96%, transparent 96%);
}
97% {
    background-image: linear-gradient(to right, #89d123 97%, transparent 97%);
}
98% {
    background-image: linear-gradient(to right, #89d123 98%, transparent 98%);
}
99% {
    background-image: linear-gradient(to right, #89d123 99%, transparent 99%);
}
100% {
    background-image: linear-gradient(to right, #89d123 100%, transparent 100%);
}
}

/* Z축 */
.ACLo-z5  {
 z-index:5;
}

.ACLo-z6  {
 z-index:6;
}

/* 로딩 화면 애니메이션 */

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

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

/* 로딩 텍스트 애니메이션 */
.ACLoading-LDtext1 {
 animation: ACLoading-LDtext1;
 animation-iteration-count: 2;
 animation-duration: 2s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
 opacity:1;
}

@keyframes ACLoading-LDtext1 {
  from {opacity:1;}
  50% {opacity:0;}
  to {opacity:1;}
}

/* 로딩 화면 배경 */

.ACLoading-bg  {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #1a1a1f;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  overflow: hidden;
  
  z-index:-3;
}

/* 컴/모바일 스크린 */

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

/* 로딩 채우기 */
.loading-fill {
	background: transparent;
    animation: loading-fill;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    transform: translate(0%, -0%);
}

@keyframes loading-fill {
0% {
    filter: grayscale(100%);
}
1% {
    filter: grayscale(99%);
}
2% {
    filter: grayscale(98%);
}
3% {
    filter: grayscale(97%);
}
4% {
    filter: grayscale(96%);
}
5% {
    filter: grayscale(95%);
}
6% {
    filter: grayscale(94%);
}
7% {
    filter: grayscale(93%);
}
8% {
    filter: grayscale(92%);
}
9% {
    filter: grayscale(91%);
}
10% {
    filter: grayscale(90%);
}
11% {
    filter: grayscale(89%);
}
12% {
    filter: grayscale(88%);
}
13% {
    filter: grayscale(87%);
}
14% {
    filter: grayscale(86%);
}
15% {
    filter: grayscale(85%);
}
16% {
    filter: grayscale(84%);
}
17% {
    filter: grayscale(83%);
}
18% {
    filter: grayscale(82%);
}
19% {
    filter: grayscale(81%);
}
20% {
    filter: grayscale(80%);
}
21% {
    filter: grayscale(79%);
}
22% {
    filter: grayscale(78%);
}
23% {
    filter: grayscale(77%);
}
24% {
    filter: grayscale(76%);
}
25% {
    filter: grayscale(75%);
}
26% {
    filter: grayscale(74%);
}
27% {
    filter: grayscale(73%);
}
28% {
    filter: grayscale(72%);
}
29% {
    filter: grayscale(71%);
}
30% {
    filter: grayscale(70%);
}
31% {
    filter: grayscale(69%);
}
32% {
    filter: grayscale(68%);
}
33% {
    filter: grayscale(67%);
}
34% {
    filter: grayscale(66%);
}
35% {
    filter: grayscale(65%);
}
36% {
    filter: grayscale(64%);
}
37% {
    filter: grayscale(63%);
}
38% {
    filter: grayscale(62%);
}
39% {
    filter: grayscale(61%);
}
40% {
    filter: grayscale(60%);
}
41% {
    filter: grayscale(59%);
}
42% {
    filter: grayscale(58%);
}
43% {
    filter: grayscale(57%);
}
44% {
    filter: grayscale(56%);
}
45% {
    filter: grayscale(55%);
}
46% {
    filter: grayscale(54%);
}
47% {
    filter: grayscale(53%);
}
48% {
    filter: grayscale(52%);
}
49% {
    filter: grayscale(51%);
}
50% {
    filter: grayscale(50%);
}
51% {
    filter: grayscale(49%);
}
52% {
    filter: grayscale(48%);
}
53% {
    filter: grayscale(47%);
}
54% {
    filter: grayscale(46%);
}
55% {
    filter: grayscale(45%);
}
56% {
    filter: grayscale(44%);
}
57% {
    filter: grayscale(43%);
}
58% {
    filter: grayscale(42%);
}
59% {
    filter: grayscale(41%);
}
60% {
    filter: grayscale(40%);
}
61% {
    filter: grayscale(39%);
}
62% {
    filter: grayscale(38%);
}
63% {
    filter: grayscale(37%);
}
64% {
    filter: grayscale(36%);
}
65% {
    filter: grayscale(35%);
}
66% {
    filter: grayscale(34%);
}
67% {
    filter: grayscale(33%);
}
68% {
    filter: grayscale(32%);
}
69% {
    filter: grayscale(31%);
}
70% {
    filter: grayscale(30%);
}
71% {
    filter: grayscale(29%);
}
72% {
    filter: grayscale(28%);
}
73% {
    filter: grayscale(27%);
}
74% {
    filter: grayscale(26%);
}
75% {
    filter: grayscale(25%);
}
76% {
    filter: grayscale(24%);
}
77% {
    filter: grayscale(23%);
}
78% {
    filter: grayscale(22%);
}
79% {
    filter: grayscale(21%);
}
80% {
    filter: grayscale(20%);
}
81% {
    filter: grayscale(19%);
}
82% {
    filter: grayscale(18%);
}
83% {
    filter: grayscale(17%);
}
84% {
    filter: grayscale(16%);
}
85% {
    filter: grayscale(15%);
}
86% {
    filter: grayscale(14%);
}
87% {
    filter: grayscale(13%);
}
88% {
    filter: grayscale(12%);
}
89% {
    filter: grayscale(11%);
}
90% {
    filter: grayscale(10%);
}
91% {
    filter: grayscale(9%);
}
92% {
    filter: grayscale(8%);
}
93% {
    filter: grayscale(7%);
}
94% {
    filter: grayscale(6%);
}
95% {
    filter: grayscale(5%);
}
96% {
    filter: grayscale(4%);
}
97% {
    filter: grayscale(3%);
}
98% {
    filter: grayscale(2%);
}
99% {
    filter: grayscale(1%);
}
100% {
    filter: grayscale(0%);
}
}

/*    # 모바일 반응성    */

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