Why does my fade-in animation keep replaying?
The default iteration count is infinite. Change it to 1 for an entrance animation. An infinite fade loops back to opacity 0 every cycle, which looks like the element is flickering rather than arriving.
My element snaps back to where it started when the animation ends. Why?
The generated shorthand does not set animation-fill-mode. Without it, CSS returns the element to its unanimated styles the moment the animation completes. Add animation-fill-mode: forwards to the rule to hold the final keyframe.
What does the Replay button actually do?
It remounts the preview element, which restarts the animation from 0%. It is a preview control only and does not appear in the copied CSS. In your own page the equivalent trick is to remove and re-add the class, or to force a reflow between the two.
Can I run two of these animations on the same element?
Not from the tool. Both the keyframes name and the .animated-element class are generated fresh each time, so pasting a second animation overwrites the first. To combine them, paste both @keyframes blocks, rename them so they do not collide, and comma-separate the two values in a single animation property.
Should I use this for a scroll-triggered animation?
The CSS half, yes. The trigger, no. This generates the keyframes and the shorthand; deciding when the animation runs still needs a class toggled by IntersectionObserver, or a scroll-driven animation timeline. Set the iteration count to 1 for that case.
Does the preview show exactly what my browser will render?
Yes, because the preview applies the same @keyframes and the same shorthand you are about to copy, using a real CSS animation on a real element. The only difference is the element itself, which in the preview is a 96px gradient square.