CSS INTERMEDIATE

CSS Animations

Master CSS animations, transitions, and transforms with practical examples

5 min read

cssanimationstransitionstransformskeyframes

CSS Transitions

Smooth property changes over time for interactive effects

Transition Properties

Control how CSS properties animate from one value to another

css

💡 Use transition for simple property changes

⚡ Transition multiple properties with comma separation

📌 transition-property: all can impact performance

✅ Combine with hover/focus for interactive effects

Timing Functions

Control the speed curve and acceleration of transitions

css

💡 ease is the default timing function

⚡ Use cubic-bezier() for custom easing curves

📌 steps() creates frame-by-frame animations

🎯 linear works best for continuous rotations

Hover Transitions

Create smooth hover effects with CSS transitions

css

💡 Define transition on base state, not hover state

⚡ Different transitions for hover on/off effects

📌 Combine transforms for complex hover effects

✅ Add will-change for better performance

Keyframe Animations

Create complex multi-step animations with @keyframes

Define Keyframes

Create named animation sequences with multiple steps

css

💡 Use percentages or from/to for keyframe stops

⚡ Keyframes can animate any CSS property

📌 Define multiple keyframes for complex animations

✅ Reuse keyframes across multiple elements

Animation Properties

Control keyframe animations with timing, duration, and iteration

css

💡 animation shorthand combines all properties

⚡ animation-fill-mode controls start/end states

📌 Use animation-play-state to pause animations

🎯 infinite iteration for continuous animations

Common Animations

Ready-to-use animation patterns for frequent use cases

css

💡 Pulse effects draw attention to CTAs

⚡ Slide animations for smooth entrances

📌 Bounce effects add playfulness

✅ Fade animations for subtle transitions

CSS Transform

2D and 3D transformations for rotating, scaling, and moving elements

Transform Functions

Move, rotate, scale, and skew elements in 2D space

css

💡 Combine multiple transforms in order

⚡ transform-origin changes the anchor point

📌 Use scale() for zoom effects

✅ translate() is better than position for animations

3D Transforms

Create depth and perspective with 3D transformations

css

💡 Set perspective on parent container

⚡ preserve-3d maintains 3D space for children

📌 backface-visibility for card flip effects

⚠️ 3D transforms can be GPU-intensive

Advanced Animations

Performance optimization and advanced animation techniques

Performance Optimization

Optimize animations for smooth 60fps performance

css

💡 Animate transform and opacity for best performance

⚡ Use will-change sparingly for GPU acceleration

📌 Avoid animating layout properties (width, height)

⚠️ Too many animations can cause jank

CSS Variables in Animations

Use custom properties for dynamic and reusable animations

css

💡 Update variables with JavaScript for dynamic animations

⚡ Variables make animations more maintainable

📌 Fallback values ensure compatibility

✅ Scope variables for component isolation

Scroll-Triggered Animations

Trigger animations based on scroll position using modern CSS

css

💡 animation-timeline for scroll-driven animations

⚡ @scroll-timeline defines custom scroll triggers

📌 Intersection Observer API for broader support

⚠️ Check browser support for scroll animations

Practical Examples

Real-world animation patterns for common UI components

Loading Animations

Create engaging loading indicators and spinners

css

💡 Keep loading animations simple and smooth

⚡ Use CSS-only solutions when possible

📌 Skeleton screens improve perceived performance

✅ Match animation to brand personality

Button Animations

Interactive button effects for better user feedback

css

💡 Subtle animations improve UX

⚡ Transform scale for press effects

📌 Ripple effects for material design

✅ Disable animations for reduced motion preference

Text Animations

Animate text for emphasis and visual interest

css

💡 Animate individual letters for typewriter effects

⚡ Use clip-path for reveal animations

📌 Text shadows for glowing effects

⚠️ Ensure text remains readable during animation

More CSS Cheat Sheets