amp-animation inside amp-story

rotate with amp-story-animation fly-in with animate-in fly-in with animate-in, after the previous element { "selector": ".animate", "duration": "1s", "keyframes": {"transform": "rotate(360deg)"} }

bounce forward with amp-story-animation fly-in with animate-in fly-in with animate-in, after the previous element { "selector": ".animate", "duration": "0.5s", "keyframes": [ {"transform": "scale(1)"}, {"transform": "scale(1.5)"}, {"transform": "scale(1)"} ] }

[ { "selector": ".animate-bottom", "duration": "2s", "iterations": "infinite", "keyframes": [ {"transform": "none"}, {"transform": "translate(0, calc(100vh - y() - height()))"}, {"transform": "none"} ] }, { "selector": ".animate-right", "duration": "2s", "iterations": "infinite", "keyframes": [ {"transform": "none"}, {"transform": "translate(calc(100vw - x() - width()), 0)"}, {"transform": "none"} ] }, { "selector": ".animate-bottom-right", "duration": "2s", "iterations": "infinite", "keyframes": [ {"transform": "none"}, {"transform": "translate(calc(100vw - x() - width()), calc(100vh - y() - height()))"}, {"transform": "none"} ] } ]

[ { "selector": ".anim", "keyframes": { "transform": ["translate3d(-100%, 0px, 0)", "translate3d(0px, 0px, 0)"] }, "delay": 100, "direction": "normal", "duration": 1000, "easing": "cubic-bezier(0.19, 1, 0.22, 1)", "fill": "both" } ] This is the animated text with initial frame in CSS This is the animated text with final frame in CSS