为什么不'；我的CSS动画不能同时运行吗？

我正在进行概念验证。我正在尝试使用HTML和CSS复制Tinder UX，以下是我的链接：

问题是，我有两个主要的动画应该并行运行。但它们是连续运行的，一个接一个。有办法同时运行它们吗

个人资料图片上的动画

.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); } } .tinder简介 { -网络工具包动画：阿凡达0.8s； 动画：阿凡达0.8秒； } @关键帧化身{ 0% { -webkit变换：比例（0.8,0.8）； 变换：比例（0.8,0.8）； } 60% { -webkit转换：规模（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>

.tinder-ping1{
-webkit动画：ping 3s轻松输入输出无限；
动画：ping 3s轻松输入输出无限；
z指数：9；
}
@关键帧ping{
0% {
-webkit变换：缩放（0,0）；
变换：缩放（0,0）；
不透明度：0.0；
}
40% {
不透明度：1.0；
}
100% {
-webkit转换：规模（1.1,1.1）；
变换：比例（1.1,1.1）；
不透明度：0.0；
}
}

---

这里有一个指向EditPen的链接，您可以在这里看到所有代码：

它与您的

触发元素的初始位置有关。它们都是以全尺寸开始的，因此在第三个动画最终调整为小尺寸之前，动画似乎无法正常工作。您将不得不使用实际设置，但设置ping 1、ping 2和ping 3会产生错误

因为初始值使它更好。您可能还需要测试z索引，但这是一个开始

本质上，第三次ping隐藏了其他两次ping，因为它在动画延迟之前是520x520像素
 酷，。。我没看到，混蛋。谢谢你解决了我的问题。
-webkit-transform: scale(0, 0);
        transform: scale(0, 0);
 opacity: 0;