Click Copy on any card. You get a .selector rule with the animation shorthand plus the matching @keyframes block. Paste both into your stylesheet and replace .selector with your own class.

The order is name, duration, timing function, delay, iteration count, direction and fill mode, for example fade-in-top 1s ease 0s 1 normal forwards. Open the generator to change each value and see the result live.

Set the iteration count to infinite. The Continuous & Looping category is already set to loop, and any other animation can loop too.

Animations that only change transform and opacity are handled by the GPU and stay smooth, even on phones. Animating box-shadow forces repaints, so use it sparingly on large elements.

Yes. Wrap animations in @media (prefers-reduced-motion: no-preference) or disable them inside @media (prefers-reduced-motion: reduce) so people who are sensitive to motion are not affected.