javascript - 每个元素的多个 css 动画在 Chrome 中不起作用

Question

我正在尝试制作动画 .circle元素。它应该会增长，然后在一秒后缩小。所以我为一个元素声明了 2 个 css 动画。在 Firefox 中它运行良好，但在 Chrome 中则不然。

Can-i-use显示 animations Chrome 中的 css 规则也应该有效。

Codepen example

完整源代码:

*,
*::before,
*::after {
  box-sizing: border-box;
}

@keyframes one {
  100% {
    width: 5000px;
    height: 5000px;
  }
}

@keyframes two {
  100% {
    width: 0px;
    height: 0px;
  }
}

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightsalmon;
}

.circle {
  position: absolute;
  height: 0px;
  width: 0px;
  border-radius: 50%;
  background-color: lightgreen;
  /** If declare only one animation, then it will work in Chrome */
  animation: one ease 1s alternate 1 paused, two ease 1s alternate 1 paused;
  animation-fill-mode: forwards;
}

<div class="container">
  <div class="circle"></div>
</div>

<script>
  var circle = document.querySelector(".circle");
  circle.style.animationPlayState = "running, paused";

  setTimeout(() => {
    circle.style.animationPlayState = "paused, running";
  }, 1000);
</script>

Answer 1

因此，正如其中一条评论所说，您可以使用单个动画来完成此操作。编码时应该始终尝试使用语义化、有意义的名称，因此我将动画命名为 grow-shrink而不仅仅是 one .

*,
::before,
::after {
  box-sizing: border-box;
}

@keyframes grow-shrink {
  50% {
    width: 5000px;
    height: 5000px;
  }
}

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightsalmon;
}

.circle {
  position: absolute;
  height: 0;
  width: 0;
  border-radius: 50%;
  background-color: lightgreen;
  animation: grow-shrink 2s;
}

您不需要任何 JavaScript 来执行此操作，也不需要 z-index属性(property)在 .circle .我将您的动画持续时间更改为 2s而不是 1s因为它正在做 1s 的工作您最初拥有的动画。 animation-timing-function初始值已经是 ease ，所以我删除了它，因为它是多余的。您也不需要 alternate值(value)。

如果您的意思是 1后 alternate在您的 animation value 作为 animation-iteration-count 的值那么可以安全地删除它，因为该属性的初始值已经是 1 .如果您的意思是 1s增长动画开始的延迟，然后收缩开始的另一个延迟 1 秒，只是忘记了单位，然后你必须让我知道，我将向你展示如何修改它来做到这一点。您可以轻松添加 1s延迟动画重新开始，但如果您使用此解决方案，则必须以不同的方式延迟收缩。

在这里您可以看到 Codepen of it working .

🚧 编辑:解决方案#2 🚧

或者，如果您想了解如何使用您的方法完成此操作(尽管我不建议在此特定动画中使用它)，以下是我在 Chrome(以及所有其他主要浏览器)中使用您的示例后的 CSS 代码:

*,
*::before,
*::after {
  box-sizing: border-box;
}

@keyframes grow {
  0% {
    height: 0;
    width: 0;
  }

  100% {
    height: 5000px;
    width: 5000px;
  }
}

@keyframes shrink {
  0% {
    height: 5000px;
    width: 5000px;
  }

  100% {
    height: 0;
    width: 0;
  }
}

.container {
  align-items: center;
  background-color: lightsalmon;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.circle {
  animation:
    grow 1s ease-in forwards paused,
    shrink 1s ease-out 1s forwards paused;
  background-color: lightgreen;
  border-radius: 50%;
  height: 0;
  position: absolute;
  width: 0;
}

去这里看 the CodePen of solution #2 working .