Animation on websites is a solved problem in 2026
Unlike 2010, you no longer have to choose between "GIF or Flash". Six established techniques cover all relevant use cases. The choice isn't a matter of taste but depends on the content: vector vs. raster animation, short vs. long loops, whether interaction is needed, whether transparency is required.
1. CSS animations and transitions
For everything that happens directly in the DOM — hover effects, micro-interactions, buttons, skeleton loaders, page transitions. @keyframes, transition, and the Web Animations API cover 80% of all UI animation needs.
Size: 0 KB (only CSS bytes). Performance: excellent thanks to the GPU-accelerated compositor. When: for UI elements that stay in the DOM and are animated by state changes.
When not: for complex vector animations with path morphing, choreographed motion sequences, or when you want to hand providers animation designs from After Effects without rebuilding them as code.
2. SVG animations with SMIL and CSS
SVG paths can be animated directly — drawing stroke lines, changing gradients, path morphing between shapes. Three routes: classic SMIL (<animate> tag), CSS on SVG elements, or JavaScript via Anime.js / GSAP.
Size: usually under 10 KB for complex animations. Performance: good for simple animations, problematic for thousands of simultaneously animated paths (DOM overhead). When: when the animation must scale and be accessible in the DOM (charts, diagram animations, logo reveals).
3. Lottie
Lottie has been the industry standard for complex vector animations from After Effects since 2015. Designers export the composition as a JSON file (or the newer dotLottie format), the browser renders it at runtime as SVG or Canvas. Airbnb's lottie-web library runs in the background.
Size: typically 15–80 KB for a 5-second animation with vector elements. Performance: good on modern devices, can become noticeable on low-end Android if the composition is complex (50+ layers). When: onboarding illustrations, hero-section animations, empty-state icons, confetti effects after successful actions, loading spinners with brand identity.
When not: for raster content (Lottie is vector-only), for very complex motion blur, or photorealistic effects.
4. Animated WebP / AVIF
For raster animations with a transparent background — i.e. animated stickers, short demo loops, reaction memes. Animated WebP has existed since 2016, animated AVIF since 2023.
Size: animated WebP typically 25–35% of the GIF size, AVIF another 30–50% smaller. A 5-second loop at 800×450 becomes a ~600 KB WebP or ~400 KB AVIF. Performance: native in all mainstream browsers, hard hardware acceleration. When: stickers, reaction animations, demo GIFs in documentation pages, animated logos on a transparent background.
A deep comparison with classic GIF is in our GIF vs. WebP post.
5. APNG
APNG is the lossless sister variant to WebP/AVIF animation. Advantage: pixel-exact preservation — important for pixel-art animations, UI sprites with hard edges, diagrams.
Size: usually 2–3× as big as animated WebP, but lossless. When: lossless pixel art, UI sprites with brand identity, demo loops where compression artifacts would be distracting. When not: for photo content (the file gets too big).
6. MP4 / WebM loop video
For background videos, product demos, longer animation sequences. The <video> element with autoplay muted loop playsinline replaces the classic GIF background with far better compression.
Size: a 10-second loop at 1920×1080 as H.264 MP4 typically 800 KB–1.5 MB, as AV1 WebM 400–700 KB. Performance: dedicated video decoders in the browser are extremely efficient, often more economical than WebP animations at comparable quality. When: hero backgrounds, product demonstrations, loops longer than 5 seconds, anything with photo content.
Important: no alpha channel in MP4 (workarounds: WebM with VP9 alpha or two videos on top of each other). For transparent backgrounds, prefer animated WebP/AVIF.
Decision matrix
- Button hover, micro-interactions: CSS transitions.
- Onboarding illustrations, empty states, loading spinners: Lottie.
- Animated logos, brand animations: SVG with CSS animations, or Lottie for complex motion.
- Stickers, reaction animations with transparency: animated WebP or AVIF.
- Pixel-art animations, UI sprites: APNG.
- Hero-section background, product demo, tutorial loops: MP4 / WebM.
- Slack reactions: classic GIF — the platform reliably understands nothing else.
Accessibility obligations 2026
WCAG 2.2 requires: all automatically running animations longer than 5 seconds must have a way to pause. prefers-reduced-motion must be respected:
@media (prefers-reduced-motion: reduce) {
.hero-animation { animation: none; }
video.background { display: none; }
img.lottie { content: url("static-fallback.svg"); }
}Lottie supports this natively via autoPlay control. With MP4 it's enough to replace the video component with a static poster image under reduced motion.
Performance budget
Animations cost performance — both bytes and CPU. Rules of thumb:
- Over 200 KB per animation: question whether a simpler technique wouldn't do.
- More than two Lottie instances running at once: layout thrashing likely.
- Background video on mobile: do a 3G test — many sites block the LCP with it.
More on performance levers in our Core Web Vitals post.
Sources
airbnb.io/lottie · dotLottie Format · MDN — CSS Animations · MDN — Web Animations API · Google — Animated WebP · Mozilla — APNG Specification · WCAG 2.2 — 2.2.2 Pause, Stop, Hide · MDN — prefers-reduced-motion.