Animations & Transitions
CSS can animate elements without JavaScript! transition smoothly changes properties when they change (like on hover). @keyframes defines an animation sequence with from/to or percentage steps. animation: then applies it. Animations make UIs feel alive and fun.
Appy Says…
Motion makes interfaces feel alive. A button that subtly scales on hover, a card that slides in, a loading spinner — these micro-interactions tell users something is happening and make your app feel polished and professional.
What are CSS Animations and Transitions?
CSS has two animation systems: transitions (smooth change between two states) and @keyframes animations (multi-step sequences that can loop).
- •
transition: property duration easing;e.g.transition: all 0.3s ease; - •Trigger with pseudo-classes:
:hover,:focus,:active - •
@keyframes name { from { ... } to { ... } }defines a sequence - •
animation: name 1s ease-in-out infinite;applies it - •Easing:
ease,ease-in,ease-out,ease-in-out,linear,cubic-bezier() - •Performant properties:
transformandopacity— GPU-accelerated, don't cause layout recalculations - •Avoid animating
width,height,top,left— they trigger layout reflow
Think of it like a Roblox Tween
Roblox's TweenService smoothly moves a part from position A to B over a set time. CSS transitions do exactly the same for web elements — set start state, end state, duration, and the browser fills in all the frames in between.
How It Works
- •1. Transition on hover:
button { transition: background 0.2s ease; } button:hover { background: blue; } - •2. Scale on hover:
:hover { transform: scale(1.05); transition: transform 0.2s; } - •3. Keyframe:
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - •4. Apply:
.loader { animation: spin 1s linear infinite; } - •5. Multiple steps:
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
Real-World Examples
- •Button hover: scale up 5% with smooth transition
- •Loading spinner: rotating border or pulsing dot
- •Modal slide in:
transform: translateY(-20px)→translateY(0) - •Skeleton loading animation: shimmer effect with
@keyframes - •WhatsApp's tick animation (grey → blue) is CSS transition on SVG paths
Key Facts
- •
transformandopacityare the two cheapest properties to animate - •The
will-change: transformhint tells the browser to prepare a GPU layer - •CSS animations can be paused with
animation-play-state: paused - •
prefers-reduced-motionmedia query lets you disable animations for users who get motion sickness
Watch Out!
Animating width, height, top, left, or margin forces the browser to recalculate layout on every frame — this causes jank on mobile. Always animate transform (translate, scale, rotate) and opacity instead.
Remember
Transitions = two-state smooth change. @keyframes = multi-step animation. Always animate transform and opacity for smooth, performant motion.
What You Learned
- •Transitions smooth state changes; @keyframes create multi-step animations
- •Animate transform and opacity for performance — avoid layout properties
- •Unlocks: hover effects, loaders, slide-ins, polished micro-interactions
Key Facts
- →
transformandopacityare the two cheapest properties to animate - →The
will-change: transformhint tells the browser to prepare a GPU layer - →CSS animations can be paused with
animation-play-state: paused - →
prefers-reduced-motionmedia query lets you disable animations for users who get motion sickness
Real-World Examples
Remember
Transitions = two-state smooth change. @keyframes = multi-step animation. Always animate transform and opacity for smooth, performant motion.
Quick Quiz
What does transition do?