css动画结束在一起，即使它们在不同的时间开始

我有一些相同类型的元素，我希望它们共享相同的css动画，但我希望它们在不同的时间开始/结束动画

html：

<div class="container">
    <div class="box hidden"></div>
</div>
<div class="container">
    <div class="box hidden"></div>
</div>
<div class="container">
    <div class="box hidden"></div>
</div>

框

元素开始时是隐藏的，然后我使用javascript在不同的时间从不同的框中删除这个类名：

const boxes = document.querySelectorAll(".box");
boxes.forEach(box => {
    setTimeout(() => box.classList.remove("hidden"), Math.random() * 1000);
});

发生的情况是，所有3个长方体在完全相同的时间结束其动画。动画确实在不同的时间开始，但都在一起结束

为什么会这样？
如果我也这样做，但是添加了一个类名而不是删除它（为了使动画开始），那么它的行为就像我希望的那样。

---

有什么想法吗？谢谢。

问题在于，长方体元素以.box类开始，该类是动画类。这意味着动画从加载元素的那一刻开始，无论它们是否隐藏。这意味着，当您删除“隐藏”类时，它们只会在动画过程中的某个点显示自己

您要做的是重命名动画类，例如“grower”

然后将其放入javascript循环中：

const boxes = document.querySelectorAll(".box");
boxes.forEach(box => {
  setTimeout(() => {
    box.classList.remove("hidden");
    box.classList.add("grower"); }, Math.random() * 1000);
});

下面是一个片段，用于实际演示：

const-box=document.queryselectoral（“.box”）；
box.forEach（box=>{
设置超时（（）=>{
box.classList.remove（“隐藏”）；
box.classList.add（“grower”）；}，Math.random（）*1000）；
});
.container{
宽度：100px；
高度：100px；
边缘底部：20px；
}
.盒子{
宽度：100%；
身高：100%；
}
.box.hidden{
可见性：隐藏；
}
.种植者{
动画：生长1秒；
动画计时功能：立方贝塞尔（.46、.13、.99、.83）；
过渡：全.2s立方贝塞尔（0.215,0.61,0.355,1）；
}
.容器：第一个孩子.盒子{
背景颜色：绿色；
}
.容器：第n个孩子（2）.盒子{
背景颜色：橙色；
}
.容器：第n个孩子（3）.盒子{
背景色：红色；
}
@关键帧生长{
从{
变换：比例（0）；
}
到{
变换：比例（1）；
}
}
仅仅是因为所有动画都已同时启动。使用
visibility:hidden
不会阻止动画启动，并在元素可见时使其稍后启动。不透明度也会发生同样的情况，例如：


const-box=document.queryselectoral（“.box”）；
box.forEach（box=>{
setTimeout（（）=>box.classList.remove（“hidden”）、Math.random（）*5000）；
});
.container{
宽度：100px；
高度：100px；
边缘底部：20px；
}
.盒子{
宽度：100%；
身高：100%；
}
.box.hidden{
不透明度：0.1；
}
.盒子{
动画：成长5s；
动画计时功能：立方贝塞尔（.46、.13、.99、.83）；
过渡：全.2s立方贝塞尔（0.215,0.61,0.355,1）；
}
.容器：第一个孩子.盒子{
背景颜色：绿色；
}
.容器：第n个孩子（2）.盒子{
背景颜色：橙色；
}
.容器：第n个孩子（3）.盒子{
背景色：红色；
}
@关键帧生长{
从{
变换：比例（0）；
}
到{
变换：比例（1）；
}
}

因为
动画：成长1秒它们都需要1秒来制作相同的动画。jQuery只控制它们何时开始，但对动画中的1秒持续时间没有影响。@SirExotic这里没有涉及
jQuery
，是的，它们都有1秒的动画持续时间，但我希望在每个项目的动画开始时，而不是在第一个项目开始时，这一秒开始。对不起，Javascript*。“取消隐藏”框的Javascript代码与动画同时运行，因此动画已经开始，即使它仍在等待Javascript“取消隐藏”框。这就是为什么您会看到一些框显示的大小已经大于0。@SirExotic在删除
隐藏的
类名之前，框2的动画是如何开始的？为什么方框1的动画会影响它？这就是我不明白的。将你的动画持续时间更改为
5s
以及JS中的5000，你会看到更好的效果。谢谢，更改为
display:none
成功了。我知道
可见性
和
显示
之间的不同，但我不知道它对动画的影响。@NitzanTomer我还添加了规范的相关部分，清楚地解释了这种行为；）谢谢，我知道添加类名（即
grower
）是可以做到的，但我想避免这样做，因为我以后需要在动画结束时删除这个类名，因为我不再需要它了。
.grower {
    animation: growIn 1s;
    animation-timing-function: cubic-bezier(.46,.13,.99,.83);
    transition: all .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

const boxes = document.querySelectorAll(".box");
boxes.forEach(box => {
  setTimeout(() => {
    box.classList.remove("hidden");
    box.classList.add("grower"); }, Math.random() * 1000);
});