Question 1

What is the difference between @keyframes and the animation property?

Accepted Answer

@keyframes defines the animation itself — a named sequence of styles at points from 0% to 100% (or from/to). The animation property then applies that named sequence to an element and controls how it plays: duration, timing-function, delay, iteration-count, direction and fill-mode. You always need both: a @keyframes block to describe the motion and an animation declaration to run it.

Question 2

What is the order of values in the CSS animation shorthand?

Accepted Answer

The shorthand is: animation: name duration timing-function delay iteration-count direction fill-mode play-state. The first time value is the duration and the second is the delay, so animation: bounce 1s ease 0.2s infinite alternate forwards means name bounce, 1s duration, ease easing, 0.2s delay, infinite iterations, alternate direction and forwards fill-mode.

Question 3

What does iteration-count: infinite do?

Accepted Answer

iteration-count sets how many times the animation runs. A number like 1 or 3 plays that many cycles and then stops; infinite repeats forever. Looping effects such as pulse, spin and shake usually use infinite, while one-shot entrances like fade-in or zoom-in normally use 1.

Question 4

What does animation-fill-mode change?

Accepted Answer

fill-mode decides which styles apply outside the animation's running time. none (default) means the element snaps back to its normal styles before and after. forwards keeps the final keyframe's styles after the animation ends — useful so a fade-in stays visible. both also applies the first keyframe during any delay before it starts.

Question 5

How does timing-function relate to cubic-bezier?

Accepted Answer

The keywords ease, linear, ease-in, ease-out and ease-in-out are just named cubic-bezier() curves — for example ease-in-out equals cubic-bezier(0.42, 0, 0.58, 1). They control the speed curve of each iteration. For a fully custom curve, build one with the cubic-bezier generator and drop the cubic-bezier(...) value in as the timing-function.

CSS AnimationGenerator

CSS Animation
Generator