css 반복 애니메이션

Question

.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 코드이고 &#64;keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 1; }} 애니메이션 코드입니다.about-arrow1 부터 about-arrow6까지 순차적으로 보이게 할 수 있을까요 예를 들면 about-arrow1이 보이고 about-arrow2가 보이면 about-arrow1이 보이지 않아야합니다. about-arrow6가 보이고 사라지면 다시 애니메이션이 반복되게 할 수 있을까요??

Glasssea · Answer

@keyframes fadeInOut{0%, 17%, 100% {opacity:0;}8.5%{opacity:1;}}.about-item-box .about-arrow {width: 100px;height: 65.61px;position: absolute;opacity: 0;animation: fadeInOut 18s infinite;}.about-item-box .about-arrow1 {animation-delay: 0s;}.about-item-box .about-arrow2 {animation-delay: 3s;}.about-item-box .about-arrow3 {animation-delay: 6s;}.about-item-box .about-arrow4 {animation-delay: 9s;}.about-item-box .about-arrow5 {animation-delay: 12s;}.about-item-box .about-arrow6 {animation-delay: 15s;}

css 반복 애니메이션

1개의 답변

#animation 목록