为什么我的CSS动画不会同时运行？(Why don't my CSS animations run simultaneously?)

 我正在研究概念证明。 我试图使用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 

I am working on a proof of concept. I am trying to duplicate Tinder UX using HTML and CSS, here's my link: CodePen
 
The problem is that I have two main animations which should run in parallel with each other. But they run sequentially, one after another. Is there a way to run them at the same time? 
 
animation on profile picture. 
 
    .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>
 
Here is a link to the EditPen, where you can see all the code: CodePen

原文：https://stackoverflow.com/questions/27929715