css 애니메이션 반복 되도록

css 애니메이션 반복 되도록

QA

css 애니메이션 반복 되도록

본문

.about-item-box .about-arrow1 {
  width: 112.23px;
  height: 65.61px;
  margin-top: 51px;
  margin-left: 133px;
  opacity: 0;
  animation: fadeInOut 3s infinite;
  animation-delay: 0s;
}

.about-item-box .about-arrow2 {
  width: 100px;
  height: 65.61px;
  margin-top: 53px;
  margin-left: 136px;
  opacity: 0;
  animation: fadeInOut 3s infinite;
  transform: rotate(60deg);
  animation-delay: 3s;
}

.about-item-box .about-arrow3 {
  width: 100px;
  height: 65.61px;
  margin-top: 229px;
  margin-left: -12px;
  opacity: 0;
  animation: fadeInOut 3s infinite;
  transform: rotate(120deg);
  animation-delay: 6s;
}

.about-item-box .about-arrow4 {
  width: 100px;
  height: 65.61px;
  margin-top: 413px;
  margin-left: -194px;
  opacity: 0;
  animation: fadeInOut 3s infinite;
  transform: rotate(-179deg);
  animation-delay: 9s;
}

.about-item-box .about-arrow5 {
  width: 100px;
  height: 65.61px;
  margin-top: 408px;
  margin-left: -337px;
  opacity: 0;
  animation: fadeInOut 3s infinite;
  transform: rotate(-478deg);
  animation-delay: 12s;
}

.about-item-box .about-arrow6 {
  width: 100px;
  height: 65.61px;
  margin-top: 224px;
  margin-left: -192px;
  opacity: 0;
  animation: fadeInOut 3s infinite;
  transform: rotate(303deg);
  animation-delay: 15s;
}

css 코드이고 @keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
} 애니메이션 코드입니다.

about-arrow1 부터 about-arrow6까지 순차적으로 보이게 할 수 있을까요 예를 들면 about-arrow1이 보이고 about-arrow2가 보이면 about-arrow1이 보이지 않아야합니다. about-arrow6가 보이고 사라지면 다시 애니메이션이 반복되게 할 수 있을까요??

이 질문에 댓글 쓰기 :

답변 1


:root {
  --anim-delay: 3s;
  --anim-duration: calc(var(--anim-delay) * 6);
}
.about-item-box .about-arrow1 {
  width: 112.23px;
  height: 65.61px;
  margin-top: 51px;
  margin-left: 133px;
  opacity: 0;
  animation: fadeInOut var(--anim-duration) infinite;
  animation-delay: calc(0 * var(--anim-delay));
}
.about-item-box .about-arrow2 {
  width: 100px;
  height: 65.61px;
  margin-top: 53px;
  margin-left: 136px;
  opacity: 0;
  animation: fadeInOut var(--anim-duration) infinite;
  transform: rotate(60deg);
  animation-delay: calc(1 * var(--anim-delay));
}
.about-item-box .about-arrow3 {
  width: 100px;
  height: 65.61px;
  margin-top: 229px;
  margin-left: -12px;
  opacity: 0;
  animation: fadeInOut var(--anim-duration) infinite;
  transform: rotate(120deg);
  animation-delay: calc(2 * var(--anim-delay));
}
.about-item-box .about-arrow4 {
  width: 100px;
  height: 65.61px;
  margin-top: 413px;
  margin-left: -194px;
  opacity: 0;
  animation: fadeInOut var(--anim-duration) infinite;
  transform: rotate(-179deg);
  animation-delay: calc(3 * var(--anim-delay));
}
.about-item-box .about-arrow5 {
  width: 100px;
  height: 65.61px;
  margin-top: 408px;
  margin-left: -337px;
  opacity: 0;
  animation: fadeInOut var(--anim-duration) infinite;
  transform: rotate(-478deg);
  animation-delay: calc(4 * var(--anim-delay));
}
.about-item-box .about-arrow6 {
  width: 100px;
  height: 65.61px;
  margin-top: 224px;
  margin-left: -192px;
  opacity: 0;
  animation: fadeInOut var(--anim-duration) infinite;
  transform: rotate(303deg);
  animation-delay: calc(5 * var(--anim-delay));
}
@keyframes fadeInOut {
  0%, 10%, 30%,
  100% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
}
답변을 작성하시기 전에 로그인 해주세요.
전체 36
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT