Suggest an editImprove this articleRefine the answer for “What is @keyframes in animations?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`@keyframes`** is a CSS rule that defines the animation's keyframes: a set of element states at different points in time, between which the animation smoothly plays the transitions. **Key point:** `@keyframes` defines what happens at each stage of the animation, while `animation` defines how and when it plays.Shown above the full answer for quick recall.Answer (EN)Image`@keyframes` is a CSS rule that **defines the animation's keyframes**: a set of element states at different points in time. The animation then smoothly "plays" the transitions between these keyframes. Format: ```css @keyframes animation-name { 0% { /* initial state */ } 50% { /* intermediate state */ } 100% { /* final state */ } } ``` After the animation is declared, it is attached to an element via the `animation` property: ```css .box { animation: animation-name 2s infinite; } ``` **The gist:** `@keyframes` defines *what* happens at each stage of the animation, while `animation` defines *how and when* it plays.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.