Transitions, transforms, and keyframe animations are core CSS features used to create smooth, interactive, and visually engaging user interfaces.
Transitions enable gradual changes between two states, such as hover effects or color changes, making interactions feel natural.
Transforms allow elements to be moved, rotated, scaled, or skewed without affecting the surrounding layout.
Keyframe animations provide full control over complex motion by defining multiple animation stages over time.
CSS Transitions: Smooth Property Changes
Transitions create fluid changes between CSS states (like hover or focus), automatically interpolating values over time.
Unlike abrupt jumps, they make interfaces feel polished and professional. Think button color shifts or menu slides—no JavaScript required.
Transition Properties and Syntax
Four key properties control transitions. Set them on the base state, and they activate on state changes.
transition: property duration timing-function delay;Core Properties
Practical Example: Hover Button
.button {
background: #007bff;
padding: 12px 24px;
transition: all 0.3s ease;
}
.button:hover {
background: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}Timing Functions for Natural Motion
Easing mimics real-world physics—slow start, fast middle, smooth end.
1. Preset keywords: ease (default), linear (constant), ease-in-out (gentle).
2. Custom curves: Use cubic-bezier() from cubic-bezier.com.
3. Steps: steps(4, jump-start) for discrete changes like typing animations.
4. Best Practice: Always test on mobile—long durations (>0.5s) feel laggy on touch devices.
Best Practice: Always test on mobile—long durations (>0.5s) feel laggy on touch devices.
CSS Transforms: Visual Manipulations
Transforms alter element appearance without affecting layout flow—rotate, scale, skew, or translate. They leverage GPU acceleration for buttery-smooth performance, even on budget phones. Perfect for icons, cards, and 3D effects.
2D Transform Functions
Combine multiple transforms in one declaration. Origin point defaults to center.
1. translateX(20px) / translateY(-10px): Slide horizontally/vertically
2. scale(1.2): Enlarge (1.0 = original size)
3. rotate(45deg): Spin clockwise
4. skewX(10deg): Slant horizontally
Card Flip Example:
.card {
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(180deg);
}3D Transforms and Perspective
Add depth with perspective() and 3D functions. Set on parent container.
Pro Tip: Use will-change: transform sparingly—it reserves GPU memory.
| 2D vs 3D Transforms | Use Case | Performance |
|---|---|---|
| 2D | Buttons, icons, simple hovers | Highest FPS |
| 3D | Product viewers, flipping cards | GPU optimized |
Keyframes define custom animation timelines with precise control over multiple properties. Unlike transitions (state-to-state), keyframes choreograph from start to end, looping infinitely if desired. Ideal for loaders, path animations, and storytelling.
@keyframes Rule Syntax
Name your animation and specify percentage stops (0% to 100%).
@keyframes slideIn {
0% { transform: translateX(-100%); opacity: 0; }
50% { opacity: 0.7; }
100% { transform: translateX(0); opacity: 1; }
}Apply to Element:
.hero {
animation: slideIn 1s ease-out forwards;
}Shorthand Properties:
1. animation-duration: animation-timing-function
2. animation-iteration-count: infinite
3. animation-direction: alternate (back and forth)
Animation Properties Reference
| Property | Values | Example |
|---|---|---|
| animation-fill-mode | forwards, backwards | Holds final state |
| animation-play-state | paused, running | Pause on hover |
| animation-delay | 2s | Wait before starting |
Loading Spinner Example:
.spinner {
width: 40px; height: 40px;
border: 4px solid #eee;
border-top: 4px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}Accessibility and Performance Best Practices
Smooth animations thrill users but can harm those with vestibular disorders. Follow WCAG 2.2 guidelines.
Respecting User Preferences
1. Reduced Motion Query:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}2. 60fps Rule: Limit to transform, opacity—avoid width/height (reflows).
3. Short Durations: 150-400ms for interactions; 500-1000ms for emphasis.
Real-World Combinations
Hero Section with All Three:
.hero {
transition: transform 0.4s ease;
animation: fadeInUp 0.8s ease-out;
}
.hero:hover {
transform: scale(1.02) translateY(-5px);
}Class Sessions
Sales Campaign
We have a sales campaign on our promoted courses and products. You can purchase 1 products at a discounted price up to 15% discount.