CSS Animations: Adding Life to Your Website
HTML5 & CSS3
SCSS
JavaScript
TypeScript
React
Next.js
Tailwind CSS
Bootstrap
ShadCN UI
Styled Components
GSAP
Framer Motion
Vite
Shopify themes
i18next & RTL
Recharts
Chart.js
SaaS dashboards
Figma to UI
Dark / light mode
4+ years
Vistothemes
Freelance UI
NFT & crypto UI
eCommerce UI
WordPress CSS
Remote-ready
Muhammad Shahzaib
Pixel-perfect
Component architecture
Live demos
HTML5 & CSS3
SCSS
JavaScript
TypeScript
React
Next.js
Tailwind CSS
Bootstrap
ShadCN UI
Styled Components
GSAP
Framer Motion
Vite
Shopify themes
i18next & RTL
Recharts
Chart.js
SaaS dashboards
Figma to UI
Dark / light mode
4+ years
Vistothemes
Freelance UI
NFT & crypto UI
eCommerce UI
WordPress CSS
Remote-ready
Muhammad Shahzaib
Pixel-perfect
Component architecture
Live demos
Motion should communicate something — state change, hierarchy, feedback — not run just because it's possible. This portfolio itself was recently stripped down from a much more animation-heavy build to exactly this principle: one or two deliberate motion details instead of scroll-triggered effects on every element.
transition vs. @keyframes
transition animates a property change triggered by something else (hover, class toggle) between two states. @keyframes + animation define a self-contained sequence that can loop, reverse, or run through multiple steps — use it for anything more complex than A-to-B.
Animate transform and opacity
Both are compositor-only properties — the browser can animate them without re-running layout, which keeps things smooth even on lower-end devices. Animating width, height, top, or left directly forces layout recalculation every frame.
Respect prefers-reduced-motion
Some users get real physical discomfort from motion. Wrapping non-essential animation in a prefers-reduced-motion: no-preference query — or disabling it entirely for the reduce case — is a one-line fix that shouldn't be skipped.
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fade-in-up 0.4s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
.card {
animation: none;
}
}The best compliment a UI animation can get is that nobody consciously notices it — it should feel like the interface responding naturally, not performing.
← back to all writingMuhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
Figma to UI
Muhammad Shahzaib
4+ years
Vistothemes
Freelance UI
Muhammad Shahzaib
Remote work
pixel-perfect
Muhammad Shahzaib
Frontend Developer
React & Next.js
TypeScript
Tailwind CSS
Muhammad Shahzaib
SaaS dashboards
Shopify themes
GSAP & Framer
Muhammad Shahzaib
ShadCN UI
RTL & i18next
UI-only scope
Muhammad Shahzaib
your mockups
production UI
Muhammad Shahzaib
