为什么我的 CSS 个动画不能同时运行？

Question

我正在进行概念验证。我正在尝试使用 HTML 和 CSS 复制 Tinder UX，这是我的 link：CodePen

问题是我有两个主要动画，它们应该运行彼此并行。但是他们运行依次，一个接一个。有没有办法同时运行它们？

个人资料图片上的动画。

    .tinder 配置文件
    {
      -webkit-动画：头像0.8s；
              动画：头像0.8s；
    }

    @关键帧头像{
        0% {
        -webkit-transform: scale(0.8, 0.8);
                变换：比例（0.8，0.8）；
      }
      60% {
        -webkit-transform: scale(1.1, 1.1);
            变换：比例（1.1，1.1）；

      }
      100% {
        -webkit 转换：比例（1、1）；
                转换：规模（1，1）；

      }
    }

和背景中的脉冲圆圈：

<pre>
.tinder-ping1{
  -webkit-animation: ping 3s ease-in-out infinite;
          animation: ping 3s ease-in-out infinite;
  z-index:9;
}
@keyframes ping {
  0% {
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
    opacity: 0.0;
  }
  40% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    opacity: 0.0;
  }
}
</pre>

这里是一个link到EditPen，在那里你可以看到所有的代码：CodePen

Answer 1

它与 tinder-ping 元素的初始位置有关。它们都以全尺寸开始，因此在第三个最终调整为小尺寸之前，动画似乎无法正常工作。您必须尝试实际设置，但将 ping 1、2 和 3 设置为

-webkit-transform: scale(0, 0);
        transform: scale(0, 0);
 opacity: 0;

因为初始值使它变得更好。您可能还需要测试 z-indexes，但这是一个开始的地方。

实际上，您的第三个 ping 隐藏了另外两个，因为它是 520x520 像素，直到动画延迟之后。

为什么我的 CSS 个动画不能同时运行？

Why don't my CSS animations run simultaneously?

css

animation

为什么我的 CSS 个动画不能同时 运行？

Why don't my CSS animations run simultaneously?

css

animation

为什么我的 CSS 个动画不能同时运行？