HTML-анимация AMP выполняет только последние ключевые кадры анимации - PullRequest
Новая
       7

HTML-анимация AMP выполняет только последние ключевые кадры анимации

0 голосов
/ 24 мая 2019

У меня есть <amp-animation>, в котором у меня есть свойство «animations», которое состоит из массива объектов, содержащих ключевые кадры. Вот код: 

<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",). Если я удаляю второй объект анимации из массива анимации, то первая анимация выполняется нормально. Но если я заменю эту вторую анимацию, то первая анимация пропускается, и выполняется только вторая. Что я делаю не так?

Примечание: я также пытался сослаться на вторую <amp-animation> из первой через "animations: secondAnimation", но применимо то же самое: secondAnimation - это та, которая выполняется, а не первый набор анимаций.

...