为什么我的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); 

     } 
    } 

，并在后台脉冲圈：

<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索引，但这是一个开始的地方。

从本质上讲，你的第三个ping是隐藏另外两个，因为它是520x520像素，直到动画延迟。