Question

想要在仅滚动图像一次时启动动画。我怎样才能做到这一点？ “放大器位置观察者”是否需要在卷轴上设置动画？

<div class="section4">
    <amp-position-observer on="enter:slideTransition2.start" intersection-ratios="0.1" layout="nodisplay"></amp-position-observer>
    <amp-img layout="responsive" alt="A view of the sea" class="eboardimg" src="/images/simbli-screens.png" width="969" height="376"></amp-img>
    <amp-animation id="slideTransition2" layout="nodisplay">
        <script type="application/json">{
            "duration": "500ms",
            "fill": "both",
            "iterations": "1",
            "animations": [{
                "selector": ".eboardimg",
                "keyframes": [
                  { "transform": "translateY(20%)" },
                  { "transform": "translateY(0)" }
                ]
            }]
        }
        </script>
     </amp-animation>
     <a href="#" class="ampstart-btn LMbtn LMbtn4 travel-input-big rounded center bold white block col-12" >
          LEARN MORE ABOUT THE CORE FOUR
        </a>
   </div>
</div>

Answer 1

您需要将第一个关键帧保留在动画之外-如果只有一个关键帧，它将从当前值变为唯一关键帧的值进行动画处理。

您可以在https://codepen.io/maxpelic/pen/mozRLQ

上了解有关amp动画的更多信息。

因此，您需要执行以下操作：

在样式区域：

.eboardimg{
   transform:translateY(20%);
}

在主页上：

<div class="section4">
    <amp-position-observer on="enter:slideTransition2.start" intersection-ratios="0.1" layout="nodisplay"></amp-position-observer>
    <amp-img layout="responsive" alt="A view of the sea" class="eboardimg" src="/images/simbli-screens.png" width="969" height="376"></amp-img>
    <amp-animation id="slideTransition2" layout="nodisplay">
        <script type="application/json">{
            "duration": "500ms",
            "fill": "both",
            "iterations": "1",
            "animations": [{
                "selector": ".eboardimg",
                "keyframes": [
                  { "transform": "translateY(0%)" }
                ]
            }]
        }
        </script>
     </amp-animation>
     <a href="#" class="ampstart-btn LMbtn LMbtn4 travel-input-big rounded center bold white block col-12" >
          LEARN MORE ABOUT THE CORE FOUR
        </a>
   </div>
</div>

这是一个有效的示例：{{3}}

滚动AMP动画

1 个答案: