How to keep Element after animation where it is on 100% for permanently - C

Question

I am Making modal and its internal content like list needs to be appear from bottom one by one when its open. I manage to make it almost but the problem is I am not getting how to make content hidden or invisible from starting and comes after animation.

Here is Js Fiddle

Plz, let me know where is mess in css if any or suggest a way.

codes are Bellow on Stacks demand (Snippet is not taking Bootstrap Source Files):

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 {
	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;}
}