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

Question

我正在研究概念验证。我正在尝试使用 HTML 和 CSS 复制 Tinder UX，这是我的链接:CodePen

问题是我有两个应该并行运行的主要动画。但它们是按顺序运行的，一个接一个。有没有办法同时运行它们？

个人资料图片上的动画。

    .tinder-profile    {      -webkit-animation: avatar 0.8s;              animation: avatar 0.8s;    }    @keyframes avatar {        0% {        -webkit-transform: scale(0.8, 0.8);                transform: scale(0.8, 0.8);      }      60% {        -webkit-transform: scale(1.1, 1.1);            transform: scale(1.1, 1.1);      }      100% {        -webkit-transform: scale(1, 1);                transform: scale(1, 1);      }    }    

and pulsing circles in the background:

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

这是 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 像素。