css动画一起结束，即使它们在不同的时间开始 [英] css animations end together even though they are started at different times

问题描述

我有几个相同类型的元素，我希望它们共享相同的CSS动画，但是我希望它们在不同的时间开始/结束动画.

I have a few elements of the same type and I want them to share the same css animation, but I want them to start/end the animation at different times.

以下代码的Codepen

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>

css:

.container {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

.box {
    width: 100%;
    height: 100%;
}

.box.hidden {
    visibility: hidden;
}

.box {
    animation: growIn 1s;
    animation-timing-function: cubic-bezier(.46,.13,.99,.83);
    transition: all .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.container:first-child .box {
    background-color: green;
}

.container:nth-child(2) .box {
    background-color: orange;
}

.container:nth-child(3) .box {
    background-color: red;
}

@keyframes growIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

box 元素开始时是隐藏的，然后使用javascript从不同的盒子中但在不同的时间删除了该类名:

The box elements start as hidden, and then using javascript I remove this classname from the different boxes but at different times:

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

发生的情况是，所有3个盒子都在同一时间结束动画.动画的确在不同的时间开始，但全部都结束了.

What happens is that all 3 boxes end their animation at the exact same time. The animation does start at different times, but all end together.

那是为什么?
如果我做同样的事情，但是添加了一个类名而不是删除它(以使动画开始)，那么它的行为就像我想要的那样.
有任何想法吗?谢谢.

Why is that?
If I do the same but add a classname instead of removing it (in order to make the animation start) then it behaves just as I want it to.
Any ideas? Thanks.

推荐答案

仅是因为所有动画均已已同时开始.使用 visibility:hidden 不会阻止动画开始，并使其在元素可见时稍后开始.例如，不透明度会发生同样的事情:

Simply because all the animation have already started at the same time. Using visibility:hidden will not prevent the animation to start and make it start later when the element is visible. The same thing will happen with opacity for example:

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

.container {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.box {
  width: 100%;
  height: 100%;
}

.box.hidden {
  opacity: 0.1;
}

.box {
  animation: growIn 5s;
  animation-timing-function: cubic-bezier(.46, .13, .99, .83);
  transition: all .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.container:first-child .box {
  background-color: green;
}

.container:nth-child(2) .box {
  background-color: orange;
}

.container:nth-child(3) .box {
  background-color: red;
}

@keyframes growIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

<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>

如果改用 display 属性，则可以看到所需的行为:

You can see the behavior you are looking for if you use the display property instead:

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

.container {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.box {
  width: 100%;
  height: 100%;
}

.box.hidden {
  display:none;
}

.box {
  animation: growIn 1s;
  animation-timing-function: cubic-bezier(.46, .13, .99, .83);
  transition: all .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.container:first-child .box {
  background-color: green;
}

.container:nth-child(2) .box {
  background-color: orange;
}

.container:nth-child(3) .box {
  background-color: red;
}

@keyframes growIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

<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>

来自规范:

可见性"属性指定是否由元素已呈现.

不可见的框仍会影响布局(设置将显示"属性设置为无"，以完全禁止框的生成).

Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether).

因此，与使用 display 时不同，使用 visibility 时，该框总是 生成.

So the box is always generated when using visibility unlike when using display.

如果我们检查与动画相关的规范，我们将找到这个:

And if we check the specification related to the animation we will find this:

将display属性设置为none将终止任何运行应用于元素及其后代的动画.如果一个元素无显示，将显示更新为无值将以动画名称开始应用于元素的所有动画属性，以及应用于带有的后代的所有动画不显示任何内容.

Setting the display property to none will terminate any running animation applied to the element and its descendants. If an element has a display of none, updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none.

这篇关于css动画一起结束，即使它们在不同的时间开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！