Question 1

What are CSS keyframes?

Accepted Answer

CSS @keyframes define the intermediate steps in a CSS animation sequence. You specify which CSS properties should change at which point in the animation cycle, using percentage values (0% = start, 100% = end). You then apply the animation to an element with the animation property: animation: my-animation 2s ease infinite.

Question 2

How do I use a @keyframes animation?

Accepted Answer

Define the @keyframes rule with a name, then apply it with the animation shorthand: animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode]. For example: animation: fadeIn 0.5s ease forwards. The animation-name must match the identifier after @keyframes.

Question 3

What CSS properties can I animate?

Accepted Answer

Most visual CSS properties can be animated: transform (translate, rotate, scale, skew), opacity, color, background-color, width, height, border-radius, box-shadow, filter, and many more. For best performance, animate only transform and opacity — these are GPU-composited and don't trigger layout or paint. Animating width, height, or position properties causes expensive repaints.

Question 4

What is animation-fill-mode in CSS?

Accepted Answer

animation-fill-mode controls what styles apply before and after the animation runs. 'none' (default): no styles outside the animation. 'forwards': element keeps the final keyframe styles after the animation ends. 'backwards': element applies the initial keyframe styles during the animation delay. 'both': combines forwards and backwards.

CSS @keyframes Editor

Related Tools