Javascript CSS分别为每个列表项设置动画

我有代码片段（HTML/CSS/JavaScript/jQuery）。 问题是关于

和类

项目列表的
在类
列表div的右侧div中的


我设法制作了整个列表的动画，但是，我试图制作每个列表项的动画，使其在结束位置飞行。我知道我可以使用带有延迟动画的简单jQuery，比如

var delay = 0;
$("#list-to-animate li").each(function() {
    $(this).delay(delay).animate({"top" : "+=30px"}, "fast");
    delay += 200;
});

但这不适用于检查元素是否确实在屏幕上的整个JavaScript。

我还在为如何正确定位
li
元素而苦苦挣扎，因此它们不在
列表div
中

有人能帮我把每个
li
都制作成现在整个列表的样子，这样就可以连续飞行了吗？

PS：我不确定嵌入的视频是否有效，如果不只是向下滚动。
$（文档）。在（'click'，'a[href^=“#”]”上，函数（事件）{
//防止直接跳转到链接的图元
event.preventDefault（）；
$（'html，body'）。设置动画({
scrollTop:$（$.attr（此'href'））.offset（）.top
}, 500);
});
var slideIndex=0；
//运行两个幻灯片，每个幻灯片一个
放映幻灯片（0）；
放映幻灯片（1）；
//给出索引的滑块函数参数
功能演示幻灯片（索引）{
var i；
//选择特定的滑块，然后选择其滑块
var sliderBlock=document.getElementsByClassName（“instagram幻灯片”）[index]；
var slides=sliderBlock.getElementsByClassName（“幻灯片”）；
对于（i=0；i幻灯片长度）{
slideIndex=1
}
幻灯片[slideIndex-1].style.display=“block”；
//超时后，再次运行相应的函数
setTimeout（function（）{showshields（index）}，2000）；
}
（函数（$）{
$.fn.visible=函数（部分）{
var$t=$（此），
$w=$（窗口），
viewTop=$w.scrollTop（），
viewBottom=viewTop+$w.height（），
_top=$t.offset（）.top，
_底部=_顶部+$t.高度（），
compareTop=partial==true？\u底部：\u顶部，
compareBottom=部分===真？\u顶部：\u底部；
返回（（compareBottom=viewTop））；
};
})（jQuery）；
var win=$（窗口）；
var allModifications=$（“.half-width content”）；
//使所有直接可见的图元可见
所有修改。每个（功能（i，el）{
变量el=$（el）；
如果（el.可见（真实））{
el.find（“.半角文本”）.addClass（“打开”）；
el.find（“.list div”）.addClass（“打开”）；
} 
});
//使滚动到视口中的元素可见
win.scroll（功能（事件）{
所有修改。每个（功能（i，el）{
变量el=$（el）；
如果（el.可见（真实））{
el.find（“.半角文本”）.addClass（“打开”）；
el.find（“.list div”）.addClass（“打开”）；
} 
});
});
正文{
保证金：0；
}
.集装箱{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
高度：100vh；
背景颜色：米色；
}
.container>div{
最小高度：100vh；
边框：1px纯黑；
框大小：边框框；
背景色：继承；
}
.container>div>a>.dot{
位置：相对位置；
过渡：背景。2s线性；
左：50%；
底部：10%；
z指数：101；
高度：25px；
宽度：25px；
背景色：白色；
边界半径：50%；
显示：内联块；
}
.container>div>a>.dot>。向下箭头{
过渡：边界。2s线性；
位置：绝对位置；
最高：11%；
左：24%；
边框：纯黑；
边框宽度：0 3px 3px 0；
显示：内联块；
填充物：5px；
}
.container>div>a.dot:悬停{
背景：黑色；
}
.container>div>a.dot:hover>。向下箭头{
边框：纯白；
边框宽度：0 3px 3px 0；
显示：内联块；
填充物：5px；
}
.container>div>a>.dot>。向下箭头{
变换：旋转（45度）；
-webkit变换：旋转（45度）；
}
.container>div.content{
高度：100vh；
宽度：100vw；
背景色：继承；
}
.全宽{
宽度：100%；
}
.半幅{
宽度：50%；
}
.video-iframe.fullsize{
身高：100%；
宽度：100%；
}
.名单{
列表样式：无；
文本对齐：居中；
}
.half width>.half width内容{
位置：相对位置；
边际上限：0；
身高：100%；
宽度：100%；
}
.half-width>.half-width content>.instagram幻灯片放映{
位置：相对位置；
身高：100%；
宽度：100%；
}
.half-width>.half-width content>.instagram幻灯片放映>img{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.half-width>.half-width content>.half-width text{
位置：绝对位置；
左：50%；
最高：150%；
可见性：隐藏；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
过渡：所有2s线性；
}
.half-width>.half-width content>.half-width text>h1{
文本对齐：居中；
}
.half-width>.half-width content>.half-width-text.open{
能见度：可见；
最高：50%；
}
.half-width>.half-width content>.list div{
位置：绝对位置；
左：50%；
最高：50%；
能见度：可见；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
过渡：所有2s线性；
}
.half-width>.half-width content>.list div{
可见性：隐藏；
z指数：-1；
最高：120%；
过渡：所有2s线性；
}
.half-width>.half-width content>.list-div.open{
最高：50%；
z指数：100；
能见度：可见；
}
.full width>.content>.third parent{
身高：100%；
显示器：flex；
flex-directin:row；
}
.full width>.content>.third parent>.third{
位置：相对位置；
弹性：10像素；
边框：1px纯黑；
}
.full width>.content>.third parent>.third>img{
位置：绝对位置；
宽度：50%；
身高：50%；
左：50%；
最高：50%；
能见度：可见；
文本对齐：居中；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.full width>.content>.third parent>.third>.middle text{
位置：绝对位置；
左：50%
ul.items-list {
        position: relative;
    }
    ul.items-list li {
        position: absolute;
    }
    ul.items-list li:nth-child(1) { top: 500px; transition: top .2s; opacity: 0; }
    ul.items-list li:nth-child(2) { top: 500px; transition: top .2s .2s; opacity: 0; }
    ul.items-list li:nth-child(3) { top: 500px; transition: top .2s .4s; opacity: 0; }
    ul.items-list li:nth-child(4) { top: 500px; transition: top .2s .6s; opacity: 0; }

    ul.items-list.bindDynamicclass li:nth-child(1) { top: 0; opacity: 1; }
    ul.items-list.bindDynamicclass li:nth-child(2) { top: 20px; opacity: 1; }
    ul.items-list.bindDynamicclass li:nth-child(3) { top: 40px; opacity: 1; }
    ul.items-list.bindDynamicclass li:nth-child(4) { top: 60px; opacity: 1; }