BitWithBite
Full-Stack · Quick Reference
Lesson 12 — CSS Variables & Animations Cheat Sheet
In one line: CSS custom properties centralize repeated values; keyframes and transitions add motion — favor transform/opacity for smooth GPU-accelerated animation.
Key Ideas
1--variable-name. Defined on :root, used with var().
2@keyframes. Defines multi-step animation sequences.
3transition. Animates a property change over time.
4transform. Moves/scales/rotates without triggering layout reflow.
5GPU compositing. transform + opacity animate on the compositor, not the CPU.
Examples
:root { --accent: #fb923c; }
.btn { background: var(--accent); }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.card {
transition: transform .2s ease;
}
.card:hover { transform: translateY(-4px); }