What is the purpose of the @keyframes rule in CSS3?

The correct answer is B. To specify the animation sequence. @keyframes defines the specific steps of a CSS animation - what styles apply at which points (0%, 50%, 100%, etc.) along the animation's timeline, making B correct. Option A describes pseudo-classes like :hover or :focus, which handle element states but have nothing to do with…

CSS3 Transitions, Transforms, and Animations

Question

Options

ATo define the style rules for different states of an element.
BTo specify the animation sequence.
CTo create responsive web designs.
DTo implement media queries.

How the community answered

(56 responses)

A
2% (1)
B
86% (48)
C
5% (3)
D
7% (4)

Explanation

@keyframes defines the specific steps of a CSS animation - what styles apply at which points (0%, 50%, 100%, etc.) along the animation's timeline, making B correct. Option A describes pseudo-classes like :hover or :focus, which handle element states but have nothing to do with animation sequencing. Options C and D both relate to responsive design: C describes flexible layouts using percentages/flexbox/grid, while D refers to @media rules that apply styles based on viewport conditions - neither involves animation. A useful memory tip: think of @keyframes as a film storyboard - you're telling the browser exactly what the scene looks like at each key moment, and the browser fills in the motion between frames.

Topics

#@keyframes#CSS3 animations#animation sequences#keyframe definitions

Community Discussion

No community discussion yet for this question.

Full 1D0-720 Practice