Suggest an editImprove this articleRefine the answer for “What are "states" in CSS animations?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**"States"** in CSS animations are fixed sets of CSS properties at specific moments in time, between which the browser creates a smooth transition; they are defined in `@keyframes` via keyframes (`from`, `to`, or percentages). **Key point:** a state is a point (keyframe) with specific styles, between which smooth interpolation happens.Shown above the full answer for quick recall.Answer (EN)ImageIn the context of animations, **states** mean fixed sets of CSS properties at specific moments in time, between which the browser creates a smooth transition. These states are defined in `@keyframes` via keyframes (`from`, `to`, or percentages: `0%`, `50%`, `100%`, etc.). ## Example with states ```css @keyframes move { 0% { transform: translateX(0); } /* state #1 */ 50% { transform: translateX(100px); } /* state #2 */ 100% { transform: translateX(0); } /* state #3 */ } ``` Here the animation goes through **three states**, and the browser fills in the smoothness between them on its own. **Important:** - states = the animation's keyframes - each state corresponds to its own set of styles - animation is not the property itself, it's **movement between states over time** **In short:** a state in a CSS animation is a point (keyframe) with specific styles, between which smooth interpolation happens.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.