AMP HTML链式动画仅执行最后一个动画关键帧

Question

我有一个<amp-animation>，其中有一个“动画”属性，该属性由包含关键帧的对象数组组成。这是代码：

<amp-animation id="popupSlideIn" layout="nodisplay">
        <script type="application/json">
            {
                "duration": "500",
                "fill": "both",
                "easing": "ease-in",
                "iterations": "1",
                "selector": ".compare-alert",

                "animations": [
                    {
                        "keyframes": [
                            {
                                "transform": "translateY(0)",
                                "opacity": 0
                            },
                            {
                                "transform": "translateY(-112px)",
                                "opacity": 1
                            }
                        ]
                    },
                    {
                        "delay": "5s",
                        "keyframes": [
                            {
                                "transform": "translateY(-112px)",
                                "opacity": 1
                            },
                            {
                                "transform": "translateY(0)",
                                "opacity": 0
                            }
                        ]
                    }
                ]
            }
        </script>
    </amp-animation>

问题是第二个动画（延迟为5秒的"delay": "5s",是唯一执行的动画。如果我从animations数组中删除第二个动画对象，则第一个动画将被执行好的，但是如果我替换第二个动画，那么第一个动画将被跳过，而仅执行第二个动画。我在做什么错了？

注意：我还尝试通过<amp-animation>引用第一个"animations: secondAnimation"中的第二个secondAnimation，但同样适用：function memoize(fn) { const cache = {}; return (...args) => { const stringifiedArgs = stringifyArgs(args); const result = cache[stringifiedArgs] = (() => { if (!cache.hasOwnProperty(stringifiedArgs)) { return fn(...args); } else { return cache[stringifiedArgs]; } })(); return result; }; }是要执行的动画，而不是第一组动画。