편집토론문서 역사

틀:ZC-animation2/styles.css: 두 판 사이의 차이

편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
/*  # 등장 애니메이션  */
/*  # 등장 애니메이션  */


.ZCA-maintext {
.ZCA-mainimg {
  opacity: 0;
  opacity: 0;
  animation: ZCA-maintext;
  animation: ZCA-maintext;
  animation-iteration-count: 1;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 0.9s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  transition: .2s ease;
  transition: .2s ease;
12번째 줄: 12번째 줄:
}
}


@keyframes ZCA-maintext {
@keyframes ZCA-mainimg {
   from {opacity: 0; transform: translateY(-20%);}
   from {opacity: 0; transform: translateY(-20%);}
   to {opacity: 1; transform: translateY(0%);}
   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;}
}
}


1.2023년 9월 30일 (토) 10:22 판

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

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