Javascript 如何在隐藏DIV中保持CSS动画播放

我有一个div，其中包含一个按钮，上面有一些连续的动画，而不仅仅是悬停，整个按钮都是动画。然后我在它下面有一个“加载更多”按钮，使用JavaScript它将加载下一个div，其中包含完全相同的按钮（带有动画）。问题是，因为第二个div是display：在单击“加载更多”按钮之前为none，动画在单击“加载更多”按钮时开始，因此与上面同一按钮的动画不一致。我想问题是，如何让我的CSS动画在显示器的背景中播放：none div，以便在加载时动画同时启动并与显示的按钮匹配

以下是问题发生地点的直接链接，请单击“加载更多”并注意CSS动画中发生的差异：

请参见上面的链接//前4个按钮设置为可见，因此它们上的CSS动画是一致的。当我单击LoadMore时，第5个按钮在div中，显示为：none现在可见，但在不同的时间启动CSS动画！！如何同时加载它

$（文档）.ready（函数（）{
$（“.content”）.slice（0,4.show（）；
$（“#加载更多”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（“.content:hidden”）.slice（0,1.slideDown（）；
如果（$（“.content:hidden”）.length==0）{
$（“#加载更多”）.text（“内容结束”）.addClass（“无内容”）；
}
});
})

*{
字体系列：“Exo 2”，无衬线；
}
身体{
宽度：100wh；
高度：90vh；
颜色：#fff；
背景：线性梯度（-90度，#F04A30，#F04A30，#303e48，#303e48）；
背景大小：400%400%；
-webkit动画：渐变15s轻松无限；
-moz动画：渐变15s轻松无限；
动画：渐变15s轻松无限；
字体系列：“Exo 2”，无衬线；
}
@-webkit关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
@-moz关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
@关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
.背景{
-moz盒阴影：0px 6px 5px#111；
-网络工具包盒阴影：0px 6px 5px#111；
盒影：0px 2px 10px#111；
背景色：#131d27！重要；
}
林克莱先生{
背景色：#131d27！重要；
宽度：120px；
高度：120px；
背景图像：url（“https://www.moenagy.dev/assets/images/moeSplash.jpg");
背景尺寸：封面；
背景重复：无重复；
背景位置：50%50%；
}
.内容{
填充：10px；
显示：无；
}
#荷德莫尔{
宽度：200px；
颜色：#000；
字体大小：粗体；
显示：块；
文本对齐：居中；
保证金：20px自动；
填充：10px；
边界半径：0px；
边框：1px实心透明；
背景色：#FFF；
过渡：.3s；
}
#加载更多：悬停{
颜色：#000；
背景色：#fff；
边框：1px实心深灰色；
文字装饰：无；
}
.加载按钮{
垫底：10px；
}
.无内容{
颜色：#000！重要；
背景色：透明！重要；
指针事件：无；
}
/*
*动画CSS按钮
*/
.动画按钮1{
背景：线性梯度（-30度，透明50%，透明50%）；
填充：20px 40px；
利润率：12像素；
显示：内联块；
-webkit转换：翻译（0%，0%）；
转换：翻译（0%，0%）；
溢出：隐藏；
颜色：#FFF；
字体大小：20px；
字母间距：2.5px；
文本对齐：居中；
文本转换：大写；
文字装饰：无；
-webkit盒阴影：0 20px 50px rgba（0,0,0,0.5）；
盒影：0 20px 50px rgba（0,0,0,0.5）；
宽度：80%！重要；
}
.动画按钮1：：之前{
内容：''；
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
背景色：#ad8585；
不透明度：0；
-webkit转换：.2s不透明度轻松输入输出；
转换：.2s不透明度，易于输入输出；
}
.动画按钮1：悬停：：之前{
不透明度：0.2；
}
a:悬停{
颜色：#000；
文字装饰：无；
}
.动画按钮1跨度{
位置：绝对位置；
}
.动画按钮1跨度：第n个子项（1）{
顶部：0px；
左：0px；
宽度：100%；
高度：2倍；
背景：-webkit渐变（线性，右上，左上，从（rgba（43,8,8,0））到（#d92626））；
背景：线性梯度（向左，rgba（43,8,8,0），#d92626）；
-webkit动画：2s animateTop线性无限；
动画：2s animateTop线性无限；
能见度：可见；
}
@关键帧动画顶点{
0% {
-webkit转换：translateX（100%）；
转化：translateX（100%）；
}
100% {
-webkit转换：translateX（-100%）；
转化：translateX（-100%）；
}
}
.动画按钮1跨度：第n个子项（2）{
顶部：0px；
右：0px；
身高：100%；
宽度：2倍；
背景：-webkit渐变（线性，左下，左上，从（rgba（43,8,8,0））到（#d92626））；
背景：线性梯度（到顶部，rgba（43,8,8,0），#d92626）；
-webkit动画：2s AnimaterRight linear-1s infinite；
动画：2s AnimaterRight linear-1s infinite；
能见度：可见；
}
@关键帧animateRight{
0% {
-webkit转换：translateY（100%）；
转化：translateY（100%）；
}
100% {
-webkit转换：translateY（-100%）；
转换：translateY（-100%）；
}
}
.动画按钮1跨度：第n个孩子（3）{
底部：0px；
左：0px；
宽度：100%；
高度：2倍；
背景：-webkit渐变（线性，左上，右上，从（rgba（43,8,8,0））到（#d92626））；
背景：线性梯度（向右，rgba（43,8,8,0），#d92626）；
-webkit动画：2s animateBottom线性无限；
动画：2s animateBottom线性无限；
能见度：可见；
}
@关键帧动画块{
0% {
-webkit转换：translateX（-100%）；
转换：transl