// ANIMATION LIBRARY

Page Transition Library

Curated CSS transitions and animations to bring your interface to life with smooth, purposeful motion.

✨

Basic Transitions

13 transitions

Fade

// OPACITY

Smooth opacity transition. Great for modal appearances, loading states, and subtle reveals.

transition: opacity 0.3s ease;
opacity: 0;
                        

⏱️ 300ms 📐 Opacity

subtle modals

→

Slide Left

// TRANSLATE-X

Element slides in from the right. Perfect for navigation menus and side panels.

transition: transform 0.3s ease;
transform: translateX(100%);
                        

⏱️ 300ms 📐 TranslateX

navigation panels

←

Slide Right

// TRANSLATE-X

Element slides in from the left. Use for back navigation and content reveals.

transition: transform 0.3s ease;
transform: translateX(-100%);
                        

⏱️ 300ms 📐 TranslateX

navigation back

↑

Slide Up

// TRANSLATE-Y

Element slides up from below. Ideal for dropdowns, tooltips, and card reveals.

transition: transform 0.3s ease;
transform: translateY(20px);
                        

⏱️ 300ms 📐 TranslateY

dropdowns cards

Scale

// TRANSFORM

Smooth scaling effect. Use for hover states, focus effects, and emphasis.

transition: transform 0.3s ease;
transform: scale(1.1);
                        

⏱️ 300ms 📐 Scale

hover emphasis

Rotate

// ROTATE

Rotational transition. Great for loading spinners, icon flips, and attention grabbers.

transition: transform 0.3s ease;
transform: rotate(90deg);
                        

⏱️ 300ms 📐 Rotate

icons loaders

Flip X

// ROTATEX

Horizontal flip effect. Perfect for card flips, 3D transforms, and before/after reveals.

transition: transform 0.6s ease;
transform-style: preserve-3d;
transform: rotateX(180deg);
                        

⏱️ 600ms 📐 RotateX

3d cards

Flip Y

// ROTATEY

Vertical flip effect. Use for image comparisons, reveal animations, and card reveals.

transition: transform 0.6s ease;
transform-style: preserve-3d;
transform: rotateY(180deg);
                        

⏱️ 600ms 📐 RotateY

3d reveals

↓

Slide Down

// TRANSLATE-Y

Element slides down from above. Perfect for notifications, alerts, and dropdown menus.

transition: transform 0.3s ease;
transform: translateY(-20px);
                        

⏱️ 300ms 📐 TranslateY

notifications alerts

Zoom In

// SCALE

Element zooms in from smaller size. Great for image galleries, modal entrances, and focus effects.

transition: transform 0.4s ease;
transform: scale(0.5);
                        

⏱️ 400ms 📐 Scale

galleries modals

Zoom Out

// SCALE

Element zooms out from larger size. Use for modal exits, image dismissals, and collapse effects.

transition: transform 0.4s ease;
transform: scale(1.5);
                        

⏱️ 400ms 📐 Scale

exits collapse

Skew

// SKEW-X

Horizontal skew transformation. Perfect for playful hover effects, button interactions, and dynamic UI elements.

transition: transform 0.3s ease;
transform: skewX(-20deg);
                        

⏱️ 300ms 📐 SkewX

playful buttons

Blur

// FILTER

Blur effect transition. Great for focus states, background dimming, and modal overlays.

transition: filter 0.4s ease;
filter: blur(10px);
                        

⏱️ 400ms 📐 Filter

focus overlays

🎬

Keyframe Animations

10 animations

Bounce

// @KEYFRAMES

Spring-like bouncing motion. Great for loading indicators, success confirmations, and playful UI elements.

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
animation: bounce 0.6s ease;
                        

⏱️ 600ms 🔄 Infinite

playful loaders

Pulse

// @KEYFRAMES

Gentle pulsing effect. Perfect for attention-grabbing elements, online indicators, and call-to-action buttons.

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
animation: pulse 1s ease infinite;
                        

⏱️ 1s 🔄 Infinite

attention indicators

Spin

// @KEYFRAMES

Continuous rotation. The classic loader pattern. Best for loading states and processing indicators.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
animation: spin 1s linear infinite;
                        

⏱️ 1s 🔄 Infinite

loaders processing

Wobble

// @KEYFRAMES

Side-to-side wobble motion. Use for error states, shaking elements, and playful interactions.

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
animation: wobble 0.5s ease;
                        

⏱️ 500ms 🔄 Once

errors playful

Stagger

// SEQUENTIAL

Sequential animation with delay. Perfect for list items, card grids, and staggered content reveals.

animation: fadeInUp 0.3s ease forwards;
animation-delay: 0.1s;
                        

⏱️ 300ms each 📊 100ms delay

lists grids

Shake

// @KEYFRAMES

Horizontal shaking motion. Use for error states, invalid inputs, and attention-grabbing alerts.

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
animation: shake 0.5s ease;
                        

⏱️ 500ms 🔄 Once

errors alerts

Glow

// @KEYFRAMES

Pulsing glow effect. Perfect for active states, featured items, and call-to-action buttons.

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--primary); }
  50% { box-shadow: 0 0 30px var(--primary), 0 0 60px var(--primary); }
}
animation: glow 2s ease infinite;
                        

⏱️ 2s 🔄 Infinite

active featured

Elastic

// @KEYFRAMES

Spring-like elastic bounce. Great for playful interactions, button presses, and micro-interactions.

@keyframes elastic {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); }
  50% { transform: scale(0.85); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
animation: elastic 1s ease;
                        

⏱️ 1s 🔄 Once

playful buttons

Swing

// @KEYFRAMES

Pendulum-like swinging motion. Use for notifications, hanging elements, and playful UI components.

@keyframes swing {
  0%, 100% { transform: rotate(0deg); transform-origin: top center; }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
}
animation: swing 0.8s ease;
                        

⏱️ 800ms 🔄 Once

notifications playful

♥

Heartbeat

// @KEYFRAMES

Double-beat heart animation. Perfect for like buttons, favorites, and emotional interactions.

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
animation: heartbeat 1s ease infinite;
                        

⏱️ 1s 🔄 Infinite

likes favorites

📐

Motion Principles

7 principles

⏱️

Duration

Micro-interactions: 150-300ms. Page transitions: 300-500ms. Complex animations: 500ms+

📈

Easing

ease-in-out for elegance, ease-out for entrances, ease-in for exits, linear for loops

🎯

Purpose

Every animation should serve a purpose: feedback, orientation, or delight

♿

Respect Preferences

Use prefers-reduced-motion to respect user accessibility settings

🔄

Continuity

Maintain visual continuity between states. Elements should flow naturally from one state to another

🏗️

Hierarchy

Use motion to establish visual hierarchy. Important elements get more attention through animation

💬

Feedback

Provide immediate visual feedback for user actions. Confirm interactions with subtle motion

📋

Best Practices

7 practices

🎚️

Respect User Preferences

Always check for prefers-reduced-motion and provide non-animated alternatives for users who are sensitive to motion.

⚡

Performance First

Use transform and opacity for animations. These are hardware accelerated. Avoid animating layout properties like width or height.

🎯

Keep It Subtle

Avoid flashy, distracting animations. Motion should enhance usability, not compete for attention.

📐

Consistent Timing

Use consistent duration across similar elements. Create a design token system for animation timing.

🧪

Test on Low-End Devices

Animations that work smoothly on your dev machine might lag on older mobile devices. Test performance on various devices.

🚀

Use Hardware Acceleration

Leverage GPU acceleration by using will-change property sparingly and sticking to transform/opacity for smooth 60fps animations.

🎨

Consider Context

Match animation style to your brand and content. Playful animations for casual apps, subtle motion for professional interfaces.