有没有办法将两个 amp-animations 添加到单个 div ？

【问题标题】：Is there a way to add two amp-animations to a single div ?有没有办法将两个 amp-animations 添加到单个 div ？
【发布时间】：2019-02-05 04:26:13
【问题描述】：

这是我的代码，在正文标记中，如文档中所述：

   <amp-animation layout="nodisplay" trigger="visibility">
    <script type="application/json">
        [
            {
                "selector": ".shape-3",
                "duration": 1000,
                "delay": 0,
                "keyframes": "buildInKeyframes",
                "fill": "both",
                "direction": "normal"
            },
            {
                "selector": ".shape-3",
                "duration": 1000,
                "delay": 1200,
                "keyframes": "buildOutKeyframes",
                "fill": "both",
                "direction": "normal"
            }

        ]
    </script>
    </amp-animation>

（在 head 标签中，我使用标签样式 amp-custom 定义了关键帧）我有一个 class="shape-3" 的 div，我想用第一个动画制作动画，完成后，用第二个动画制作动画。问题是

【问题讨论】：

标签： css-animations amp-html amp-ad

【解决方案1】：

您可以尝试通过以下方式使用动画：

<amp-animation layout="nodisplay">
  <script type="application/json">
    {
      "selector": ".shape-3",
      "duration": "1s",
      "iterations": "1",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "selector": ".target-class",
          "easing": "cubic-bezier(0,0,.21,1)",
          "keyframes": {
            "transform": "rotate(20deg)"
          }
        },
        {
          "delay": "1s",
          "easing": "cubic-bezier(0,0,.21,1)",
          "keyframes": {
            "transform": "rotate(30deg)"
          }
        }
      ]
    }
  </script>
</amp-animation>

第二个动画的延迟是第一个动画所花费的时间。

【讨论】：