틀:ZC-animation2/styles.css

2023년 9월 30일 (토) 10:31 판 (원본 보기) Ernst (토론 | 기여) 편집 요약 없음 태그: 수동 되돌리기 ← 이전 편집		2023년 9월 30일 (토) 10:33 판 (원본 보기) Ernst (토론 | 기여) 편집 요약 없음 다음 편집 →
67번째 줄:		67번째 줄:
	from {opacity: 0; transform: translateX(-2%);}		from {opacity: 0; transform: translateX(-2%);}
	to {opacity: 1; transform: translateX(0%);}		to {opacity: 1; transform: translateX(0%);}
			}
			/*    # 반응 애니메이션    */
			.ZCA-hoverB {
			filter:brightness(1);
			transition: filter 0.5s;
			}
			.ZCA-hoverB:hover {
			filter:brightness(1.8);
	}		}

---

2023년 9월 30일 (토) 10:33 판

/*   # 등장 애니메이션   */

.ZCA-mainimg  {
 opacity: 0;
 animation: ZCA-maintext;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateY(0%);
}

@keyframes ZCA-mainimg {
  from {opacity: 0; transform: translateY(-20%);}
  to {opacity: 1; transform: translateY(0%);}
}

.ZCA-maintext  {
 opacity: 0;
 animation: ZCA-maintext;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0.75s;
 animation-fill-mode: forwards;
}

@keyframes ZCA-maintext {
  from {opacity: 0;}
  to {opacity: 1;}
}

.ZCA-subtext1  {
 opacity: 0;
 animation: ZCA-subtext;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateX(0%);
}

.ZCA-subtext2  {
 opacity: 0;
 animation: ZCA-subtext;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0.25s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateX(0%);
}

.ZCA-subtext3  {
 opacity: 0;
 animation: ZCA-subtext;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 0.5s;
 animation-fill-mode: forwards;
 transition: .2s ease;
 transform: translateX(0%);
}

@keyframes ZCA-subtext {
  from {opacity: 0; transform: translateX(-2%);}
  to {opacity: 1; transform: translateX(0%);}
}

/*    # 반응 애니메이션    */

.ZCA-hoverB {
    filter:brightness(1);
    transition: filter 0.5s;
}
.ZCA-hoverB:hover {
    filter:brightness(1.8);
}