Prisma says@keyframes + animation create multi-step, looping motion independent of state changes.
Where transitions need a trigger, animation runs on its own. Define stages with @keyframes name { 0%{…} 100%{…} }, then apply animation: name 2s infinite. Control iteration count, direction (alternate), delay, fill mode. Perfect for spinners and pulses.
Power-ups you unlock
@keyframes defines the stages (0%–100%)
animation: name duration timing iteration
infinite + alternate for back-and-forth
Runs without a state trigger
Jank the Janitor attacks — common mistakes
Animating expensive properties in a loop
Forgetting animation-fill-mode (snaps back)
Too many infinite animations hurting perf
Boss battleMake a pulsing dot with @keyframes scaling opacity and size, looping infinitely.