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

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

1 个答案: