📖 Notes
LESSON 12 OF 32
CSS Variables & Animations
Reusable Values, Reusable Motion
CSS custom properties let you define a colour or size once and reuse it everywhere, while keyframe animations add motion without a single line of JavaScript.
Variables
Define Once, Use Everywhere
- Defined on
:root, used withvar(--name) - Change the definition once — every usage updates automatically
Animation Building Blocks
🎬
@keyframes
Defines motion steps at 0%, 50%, 100%, etc.
▶️
animation
Applies a keyframe: name, duration, timing, iteration count.
🔄
transition
Smooth change between two states, e.g. on hover.
↔️
transform
Move/scale/rotate without affecting document flow.
Variables + Floating Animation
CSS:root {
--accent: #4f9eff;
--bg: #05091a;
}
.btn { background: var(--accent); transition: transform .2s; }
.btn:hover { transform: translateY(-2px); }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.logo { animation: float 3s ease-in-out infinite; }
💡
transform doesn't trigger layout recalculation
Animating transform (and opacity) runs on the GPU compositor and stays smooth even on low-end devices, unlike animating width, margin, or top — which force the browser to recalculate layout on every frame.