n 번째 위치를 기준으로 * 프로그레시브 * 애니메이션 지연을 추가하는 방법은 무엇입니까?

Question

항목 목록에 애니메이션을 적용하고 싶습니다. 첫 번째 애니메이션은 0ms 지연으로 애니 메이팅해야하고, 두 번째 애니메이션은 50ms 지연으로, 세 번째 애니메이션에는 100ms 지연으로 애니메이션을 수행해야합니다. 목록은 동적이므로 길이를 알 수 없습니다.

이것이 가능합니까? 참고 : 애니메이션/키 프레임에 대한 도움은 특별히 필요하지 않지만, n 번째 또는 n 번째 유형 (또는 다른 것)을 사용하여 형제 간의 상대적인 위치에 따라 점진적 애니메이션 지연을 얻는 방법은 무엇입니까?

도움이된다면 React/SASS/Webpack을 사용하고 있습니다. 필요한 경우 jQuery를 사용할 수 있지만 가능한 경우 사용하지 않는 것이 좋습니다.

Answer 1

다음은 순수한 CSS에서 이와 같은 작업을 수행하는 방법에 대한 예입니다. 쉽게 변경할 수 있습니다.

$(document).ready(function() { 
 

 
    $('.myList img').each(function(i){ 
 
    var item = $(this); 
 
    setTimeout(function() { 
 
     item.toggleClass('animate'); 
 
    }, 150*i); 
 
    }) 
 

 
});

@keyframes FadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(.1); 
 
    } 
 

 
    85% { 
 
    opacity: 1; 
 
    transform: scale(1.05); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
} 
 

 
.myList img { 
 
    float: left; 
 
    margin: 5px; 
 
    visibility: hidden; 
 
} 
 

 
.myList img.animate { 
 
    visibility: visible; 
 
    animation: FadeIn 1s linear; 
 
    animation-fill-mode:both; 
 
    animation-delay: .5s 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myList"> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
</div>