爲什麼我的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像素，直到動畫延遲。