영구적으로 100 %에있는 애니메이션 후에 요소를 유지하는 방법 - C

Question

나는 모달을 만들고 있으며 목록과 같은 내부 내용은 열 때 맨 아래부터 하나씩 표시해야합니다. 나는 거의 그것을 만들 수 있지만 문제는 내가 숨기거나 보이지 않는 콘텐츠를 시작하는 것으로 만드는 방법을 얻지 못하고 애니메이션을 따르는 것입니다.

Here is Js Fiddle

Plz은, CSS의 혼란이 일부 또는 제안하는 방법 경우 어디 있는지 알려주십시오.

코드 (코드 조각은 부트 스트랩 소스 파일을 복용하지 않음) 스택 수요에 벨로 있습니다

li { transition: transform 1s, opacity 1s; animation-name: list-live; animation-duration: 3s; animation-iteration-count:1; } 
 
li:first-child { animation-delay:100ms; } 
 
li:nth-child(2) { animation-delay:300ms;} 
 
li:nth-child(3) { animation-delay:500ms;} 
 
li:nth-child(4) { transition: transform 1s, opacity 4s; animation-delay: 700ms; } 
 
@keyframes list-live { 
 
\t 0% { transform: translate(0, 200px); opacity: 0;} 
 
    100% { transform: translate(0, 0); opacity:1;} 
 
}

<!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <ul> 
 
      <li class="tr1">Item 1</li> 
 
      <li class="tr2">Item 2</li> 
 
      <li class="tr3">Item 3</li> 
 
      <li class="tr4">Item 4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

이 코드를 사용해보십시오. 나는 당신의 CSS 코드를 편집했다.

li { 
    transition: all .5s; 
    animation:list-live linear 2s forwards; 
    opacity: 0; 
} 
.modal-content { 
     overflow: hidden; 
} 
li:first-child { animation-delay:100ms; } 
li:nth-child(2) { animation-delay:300ms;} 
li:nth-child(3) { animation-delay:500ms;} 
li:nth-child(4) { animation-delay: 700ms; } 
@keyframes list-live { 
    0% { transform: translateY(200px); opacity: 0;} 
    100% { transform: translateY(0); opacity:1;} 
}