What is the difference between transition and animation?

Transitions react to state changes; animations run independently with keyframes and do not need a trigger.

Does it generate the @keyframes too?

Yes. A starter @keyframes block is generated alongside the animation property.

ease, linear, ease-in, ease-out, ease-in-out, and custom cubic-bezier values are all available.

fill-mode: forwards keeps the final keyframe applied after the animation ends, often needed for intro effects.

Set animation name, duration, easing, and loop count to get the CSS animation property.

demo

CSS Output