CSS Animations — The Essential Toolkit
CSS animations are handled by the browser's compositor thread — they run at 60fps without touching the main thread. JavaScript animation libraries (GSAP, Framer Motion) add 30–100KB. CSS animations add 0KB. For 90% of landing page animations, CSS is sufficient and significantly faster.
Fade In
Scroll-Triggered Fade In
Elements fade from opacity:0 to opacity:1 as they enter the viewport. Intersection Observer API triggers a CSS class addition — the animation itself is pure CSS. Under 8 lines of JavaScript.
Counters
Animated Number Counters
Stats that count up when scrolled into view: "0 → 12,000 users". Intersection Observer triggers the count. Pure JavaScript math — no library. Powerful visual effect for hero stats and social proof sections.
Hover
CSS Hover Micro-interactions
Card lift (transform: translateY(-4px)), button scale (transform: scale(1.02)), link underline slide. All pure CSS — no JavaScript. Add transition: all .2s ease to any element and define the :hover state.
Loading
Skeleton Screen Animations
Grey placeholder blocks with a shimmer animation while content loads. CSS @keyframes shimmer effect — pure CSS, zero JavaScript. Perceived load time drops significantly with skeleton screens.
Scroll Fade-In — Complete CSS + JS Implementation
/* CSS — fade-in animation */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity .5s ease, transform .5s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
// JS — Intersection Observer (8 lines)
const obs = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) e.target.classList.add('visible');
});
}, { threshold: 0.15 });
document.querySelectorAll('.fade-in').forEach(el => obs.observe(el));
Frequently Asked Questions
How do I add animations to an HTML CSS template?
Define a CSS transition or @keyframes animation. For scroll-triggered effects, add an initial state (opacity:0, transform:translateY(20px)) and use Intersection Observer to add a 'visible' class when the element enters the viewport. The visible class applies the final state (opacity:1, transform:translateY(0)) — the transition property handles the animation.
What CSS properties can I animate without hurting performance?
Only animate opacity and transform — these run on the GPU compositor thread and never trigger layout or paint. Animating width, height, top, left, margin, or padding causes the browser to recalculate layout on every frame, causing jank. Use transform: translateY() instead of top, transform: scaleX() instead of width changes.
How do I animate numbers counting up in HTML?
Use Intersection Observer to detect when the stat enters the viewport, then run a setInterval loop that increments a counter variable and updates the element's textContent. Ease the animation using a sine or exponential curve for a natural deceleration. Total implementation: about 20 lines of vanilla JavaScript — no library needed.
Should I use a JavaScript animation library or CSS animations?
CSS for anything involving opacity, transform, hover states, and simple enter/exit animations. JavaScript (Intersection Observer) for scroll triggers. Only use GSAP or Framer Motion for complex, timeline-based animations (SVG path animations, complex sequences). Libraries add 30–100KB — the cost must be justified by the complexity of the animation.
Do UIXDraft HTML templates include animations?
Yes. UIXDraft templates include CSS transitions on hover states, button interactions, and nav elements. The architecture (CSS custom properties + semantic classes) makes it straightforward to add scroll-triggered animations by adding the fade-in class and Intersection Observer script. One $35 purchase, 180+ templates.