多个 webkit 动画答案

【问题标题】：Multiple webkit animations多个 webkit 动画
【发布时间】：2012-09-17 10:04:34
【问题描述】：

我正在尝试一次运行多个 webkit 动画。演示可以be seen here：

HTML：

<body>
  <div class="dot"></div>
</body>

JavaScript：

$(function(){

    $('body').append('<div class="dot" style="left:100px; top:200px"></div>');


});

CSS：

body{
  background: #333;
}

.dot{
    background: -webkit-radial-gradient(center, ellipse cover, #f00 90%, #fff 10%);
    border-radius: 6px;
    background: red;
    display: block;
    height: 6px;
    position: absolute;
    margin: 40px 0 0 40px;
    width: 6px;
    -webkit-box-shadow: 0 0 2px 2px #222;




    -webkit-animation: shrink 2.s ease-out;

    -webkit-animation: pulsate 4s infinite ease-in-out;
  }


  @-webkit-keyframes shrink{
    0%{
      -webkit-box-shadow: 0 0 2px 2px #222;
      -webkit-transform: scale(2);
    }
    50%{
      -webkit-box-shadow: 0 0 2px 2px #222;
          -webkit-transform: scale(1.5);
      }
    100%{
      -webkit-box-shadow: 0 0 2px 2px #222;
          -webkit-transform: scale(1);
      }
  }

    @-webkit-keyframes pulsate{
      0%{
          -webkit-transform: scale(1);
      -webkit-box-shadow: 0 0 2px 2px #222;
      }
      50%{
          -webkit-transform: scale(1.1);
      -webkit-box-shadow: 0 0 2px 2px #111;
      }
    100%{ 
          -webkit-transform: scale(1);
      -webkit-box-shadow: 0 0 2px 2px #222;
      }
  }

.dot 有两个动画：

收缩
脉动（很难看到，但它就在那里）

也许我需要找到一种同步它们的好方法。收缩动画完成后，跳动。我不能同时运行它们，所以 .dot 中将 pulsate 注释掉。

有什么建议吗？谢谢。

【问题讨论】：

我实际上没有看到任何动画。
@MadaraUchiha Pulsate 是当前的动画，真的很难看。寻找周围的阴影（缩放可能会有所帮助）。谢谢。
不，即使放大后，我也无话可说。我的检查员告诉我动画属性上的“无效属性值”。
可能是因为shrink 2.s ease-out，我把它改成了shrink 2s ease-out，它工作了

标签： css animation webkit

【解决方案1】：

您可以使用, 分隔多个动画，并在需要时在第二个动画上设置延迟：

-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

第二个动画中的2s是延迟

从 Chrome 43 和 Safari 9/9.2 开始，只有黑莓和 UC (Android) 浏览器需要 -webkit- 前缀。所以新的正确语法是

animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

【讨论】：

动画速记为：name duration timing delay。 pulsate 4s ease-out 2s infinite 也是如此
奇数。这似乎对我不起作用。它只尊重第一个动画，而不是第二个。
你用什么浏览器（@Tyguy7 和@kwoxer）测试它？确保包括所有必要的供应商前缀，以及一个非前缀版本：caniuse.com/#feat=css-animation 我将编辑我的答案以包括这种情况
看起来它对我不起作用，但在我的情况下它只尊重最后一个动画。 Chrome 58.0.3029.96，win10