<button onclick="add()">添加</button>
<ul class="list" id="list">
  <li>box</li>
  <li>box</li>
  <li>box</li>
  <li>box</li>
  <li>box</li>
</ul>
.list{
    list-style: none;
    width: 200px;
    color: #fff;
    counter-reset: num;
}
.list li{
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 3;
    margin: 10px;
    max-height: 100px;
    background:slateblue;
    opacity: 0;
    transform: translateX(100px);
    animation:show .5s forwards;
}
.list li.show{
    animation-delay: 0s!important;
}
.list li.hide{
    opacity: 1;
    transform: translateX(0);
    animation-name:hide;
    animation-delay: 0s;
}

.list li:after{
    counter-increment: num;
    content: counter(num)
}
.list li:nth-child(2n + 1) {
    background: tomato
}
.list li:nth-child(3n + 2) {
    background:royalblue
}
.list li:nth-child(5n + 3) {
    background:violet
}
.list li:nth-child(7n + 4) {
    background:tan;
    color: #000;
}
.list li:nth-child(11n + 5) {
    background:yellowgreen
}
/*animation-delay*/
.list li:not(.hide):nth-child(5n + 1) {
    animation-delay: .3s;
}
.list li:not(.hide):nth-child(5n + 2) {
    animation-delay: .6s;
}
.list li:not(.hide):nth-child(5n + 3) {
    animation-delay: .9s;
}
.list li:not(.hide):nth-child(5n + 4) {
    animation-delay: 1.2s;
}
.list li:not(.hide):nth-child(5n + 5) {
    animation-delay: 1.5s;
}

@keyframes show{
    to {
        opacity: 1;
        transform: translateX(0)
    }
}
@keyframes hide{
    to {
        opacity: 0;
        transform: translateX(100px);
        max-height: 0;
        margin: 0;
    }
}
function add(){
    var fragment = document.createDocumentFragment();
    for(var i=0;i<5;i++){
        var li =document.createElement("li");
        li.innerText = 'box';
        li.className = ' ';
        fragment.appendChild(li);
    }
    document.getElementById('list').appendChild(fragment);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.