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

【问题标题】：Why don't my CSS animations run simultaneously?为什么我的 CSS 动画不能同时运行？
【发布时间】：2015-03-11 20:32:34
【问题描述】：

我正在研究概念验证。我正在尝试使用 HTML 和 CSS 复制 Tinder UX，这是我的链接：CodePen

问题是我有两个应该并行运行的主要动画。但它们是按顺序运行的，一个接一个。有没有办法同时运行它们？

头像上的动画。

.tinder-profile { -webkit-animation：头像0.8s；动画：头像0.8s； } @keyframes头像{ 0% { -webkit 转换：比例（0.8，0.8）；变换：比例（0.8，0.8）； } 60% { -webkit-transform：比例（1.1，1.1）；变换：比例（1.1，1.1）； } 100% { -webkit-transform: 比例(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>

这里是 EditPen 的链接，您可以在其中查看所有代码：CodePen

【问题讨论】：

标签： css animation

【解决方案1】：

它与tinder-ping 元素的初始位置有关。它们都从全尺寸开始，因此动画似乎无法正常工作，直到第三个最终调整为小尺寸。您必须使用实际设置，但设置 ping 1、2 和 3 以具有

-webkit-transform: scale(0, 0);
        transform: scale(0, 0);
 opacity: 0;

作为初始值使其更好。您可能还需要测试 z-indexes，但这是一个开始的地方。

本质上，您的第三个 ping 隐藏了其他两个，因为它是 520x520 像素，直到动画延迟之后。

【讨论】：

酷，.. 我没看到，真可惜。谢谢你解决了我的问题。