What CSS at-rule is used to define keyframes for animations?

The CSS at-rule used to define keyframes for animations is `@keyframes`.

A `@keyframes` rule describes an animation's changing states over time. Keyframe selectors such as `from`, `to`, or percentages identify points in the sequence, while declarations specify properties such as `transform`, `opacity`, or `background-color`. An element then runs that sequence through properties including `animation-name` and `animation-duration`.

The name is plural because one animation normally contains multiple frames or stages. `@keyframe`, `@frames`, and `@animation` are not the standard CSS at-rule names. Developers may also encounter older vendor-prefixed forms, including `@-webkit-keyframes` and `@-moz-keyframes`, which were used before unprefixed support became widespread.

CSS animation work accelerated in the late 2000s, and the CSS Animations Level 1 module was first published by the W3C in 2009. Unlike JavaScript-driven animation, CSS animations can be declared in stylesheets and offer browser-managed timing and playback controls.