몇 초 후 CSS의 무한 애니메이션이 일관성이없고 뒤떨어져 있지 않습니다.

Question

배너를 통해 펼쳐지는 미리보기 이미지 목록이있었습니다. 각 이미지는 자체 애니메이션 간격을 기준으로 애니메이션을 적용하고 애니메이션을 무한 반복합니다. 처음 페이지를로드했을 때 애니메이션이 부드럽고 멋지게 보이고 몇 초 후 애니메이션 페이스가 마모되어 일관성이 없어졌습니다. 내 inspect 요소를 열고 메모리 애니메이션을 추적하면 시간이 지남에 따라 힙 메모리가 증가하고 결국에는 뒤떨어져 있습니다.

HTML

<div class="images"> 
    <div class="animated fadeIn infinite img1"></div> 
    <div class="animated fadeIn infinite img2"></div> 
    <div class="animated fadeIn infinite img3"></div> 
    <div class="animated fadeIn infinite img4"></div> 
    <div class="animated fadeIn infinite img5"></div> 
    <div class="animated fadeIn infinite img6"></div> 
</div> 

CSS

.img1 { animation-duration: 2.65s; } 
.img2 { animation-duration: 2.75s; } 
.img3 { animation-duration: 2.85s; } 
.img4 { animation-duration: 2.95s; } 
.img5 { animation-duration: 3.05s; } 
.img6 { animation-duration: 3.10s; } 

성능

Answer 1

animation-direction을 alternate으로 설정하면 성능 문제를 해결할 수 있습니다.

CSS

animation-direction: alternate; 

성능