CSS Animations
šļø CSS Animations
Animation is a powerful tool for creating smooth and dynamic UI, making your interfaces feel more engaging and responsive.
In this cheatsheet, we'll go over the fundamentals of creating animations in CSS.
What's in this cheatsheet:
ā Common Animation Properties ā @keyframes ā animation-duration ā animation-timing-function ā animation-iteration-count ā animation-direction ā animation-fill-mode ā animation-play-state ā Shorthand: animation
Common Animation Properties
| Property | Description |
|---|---|
@keyframes | Defines animation stages (0% - 100%). |
animation-name | The name of the @keyframes to apply. |
animation-duration | How long one cycle takes (s / ms). |
animation-timing-function | Easing curve between keyframes (linear, ease, cubic-bezier). |
animation-delay | Time to wait before starting the first iteration. |
animation-iteration-count | Number of times to repeat (infinite allowed). |
animation-direction | normal, reverse, alternate, alternate-reverse. |
animation-fill-mode | What styles apply before/after animation (forwards, backwards). |
animation-play-state | running or paused. |
animation | Shorthand for name, duration, timing, delay, iteration, direction. |
@keyframes
Define the animation steps.
@keyframes popBounce {
0% {
transform: translateY(0) scale(0.95);
opacity: 0;
}
10% {
transform: translateY(-12px) scale(1.08);
opacity: 1;
}
30% {
transform: translateY(8px) scale(0.98);
}
50% {
transform: translateY(-6px) scale(1.02);
}
70% {
transform: translateY(2px) scale(0.995);
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}animation-duration
Controls how long one animation cycle runs.
@keyframes popBounce {
/* . . . */
}
.card {
animation-name: popBounce;
animation-duration: 1000ms;
}1s
2s
5s
animation-timing-function
Defines the pacing between keyframes.
.card {
animation-name: popBounce;
animation-duration: 500ms;
animation-timing-function: ease-in;
}linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier()
animation-iteration-count
How many times the animation repeats (infinite allowed).
.card {
animation-name: popBounce;
animation-duration: 1000ms;
animation-iteration-count: 3;
}1
3
10
infinite
animation-direction
Controls playback direction per iteration.
/* direction example using longhand */
.card {
animation-name: popBounce;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-direction: normal; /* normal | reverse | alternate | alternate-reverse */
}normal
reverse
alternate
alternate-reverse
animation-fill-mode
What styles apply before/after the animation (none, forwards, backwards, both).
/* fill-mode example */
.card {
animation-name: popBounce;
animation-duration: 800ms;
animation-fill-mode: both; /* none | forwards | backwards | both */
}| Value | Description |
|---|---|
none | Default. No styles are applied before or after the animation; the element uses its normal state outside the animation. |
forwards | After the animation finishes, the element keeps the styles from the last keyframe. |
backwards | If the animation has a delay, the element applies the first keyframe styles during that delay period (useful for showing an initial state before the animation starts). |
both | Combines backwards and forwards: applies the first keyframe during any delay and retains the final keyframe styles after the animation ends. |
animation-play-state
Pause/resume animations with JavaScript or user controls.
/* play-state example */
.card {
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-play-state: running; /* or paused */
}Shorthand: animation
Shorthand combines multiple animation properties. Prefer longhand when you need clarity.
/* shorthand example */
.card {
animation: fadeMoveUp 360ms cubic-bezier(0.2, 0.9, 0.2, 1) 0ms 1 both;
}Full-Stack AI Developer Roadmap
From HTML & CSS to working with AI models, all in one structured roadmap.
