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