如何保持动画后的元素永久为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;} 
}