Exit
PDF
# CSS Animation Systems ## Building Maintainable, Performant Animations
## Why Animation Systems Matter - **Consistency** across your application - **Performance** optimization - **Maintainability** over time - **Accessibility** for all users - **Developer Experience** improvements
## Core Principles ### 1. Use CSS Custom Properties ```css --transition-duration-fast: 0.1s; --transition-duration-standard: 0.2s; --transition-duration-slow: 0.3s; ``` ### 2. Prefer Specific Properties ```css /* ❌ Avoid */ transition: all 0.3s ease; /* ✅ Prefer */ transition: transform 0.3s ease; ```
## Timing & Easing ### Duration Scale ```css --duration-instant: 0.1s; --duration-fast: 0.2s; --duration-normal: 0.3s; --duration-slow: 0.5s; --duration-slower: 0.8s; ``` ### Easing Functions ```css --ease-standard: ease-in-out; --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); ```
## Common Animation Patterns ### Hover Effects ```css .card { transition: transform var(--duration-fast) var(--ease-smooth); } .card:hover { transform: translateY(-4px); } ``` ### Focus States ```css .input:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } ```
## Performance Best Practices ### Animatable Properties #### GPU-Accelerated (Fast) ✅ - `transform` - `opacity` - `filter` #### CPU-Bound (Slower) ⚠️ - `width`, `height` - `padding`, `margin` - `color`, `background`
## The Transform Trick ### Instead of animating position: ```css /* ❌ Triggers layout */ .box { position: relative; transition: left 0.3s; } .box:hover { left: 10px; } ``` ### Use transform: ```css /* ✅ GPU accelerated */ .box { transition: transform 0.3s; } .box:hover { transform: translateX(10px); } ```
## will-change Property ### When to use: ```css .heavy-animation { will-change: transform, opacity; } ``` ### Best Practices: - Add before animation starts - Remove after animation ends - Don't overuse (memory cost)
## Utility Classes Approach ### Define Reusable Classes ```css .transition-transform { transition-property: transform; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-smooth); } .transition-colors { transition-property: color, background-color, border-color; transition-duration: var(--duration-fast); } ``` ### Usage ```html <button class="transition-colors hover:bg-primary"> Click me </button> ```
## State-Based Animations ### Using Data Attributes ```css [data-state="loading"] { opacity: 0.5; cursor: wait; } [data-state="success"] { background: var(--color-success); } [data-state="error"] { background: var(--color-error); animation: shake 0.3s; } ```
## Keyframe Animations ### Define Reusable Animations ```css @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } ```
## Animation Utility Classes ```css .animate-fadeIn { animation: fadeIn var(--duration-normal) var(--ease-smooth); } .animate-slideUp { animation: slideUp var(--duration-normal) var(--ease-smooth); } .animate-pulse { animation: pulse 2s infinite; } ```
## Accessibility Considerations ### Respect User Preferences ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } ```
## Advanced Techniques ### Staggered Animations ```css .list-item { opacity: 0; animation: fadeIn 0.3s forwards; } .list-item:nth-child(1) { animation-delay: 0.1s; } .list-item:nth-child(2) { animation-delay: 0.2s; } .list-item:nth-child(3) { animation-delay: 0.3s; } ```
## CSS Grid & Flexbox Animations ### Smooth Layout Changes ```css .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); transition: gap 0.3s ease; } .grid:hover { gap: 2rem; } ```
## Modern CSS Features ### Container Queries + Animations ```css @container (min-width: 400px) { .card { animation: expandCard 0.3s ease; } } ``` ### View Transitions API ```css ::view-transition-old(root) { animation: fade-out 0.3s; } ::view-transition-new(root) { animation: fade-in 0.3s; } ```
## Building Your System ### 1. Define Your Scale ```css :root { /* Durations */ --d-1: 0.1s; --d-2: 0.2s; --d-3: 0.3s; --d-4: 0.5s; /* Easings */ --ease-1: ease; --ease-2: ease-in-out; --ease-3: var(--ease-smooth); } ```
## Component Example ### Complete Button System ```css .btn { /* Base styles */ padding: 0.5rem 1rem; border-radius: 0.25rem; /* Transition setup */ transition-property: transform, background-color, box-shadow; transition-duration: var(--d-2); transition-timing-function: var(--ease-2); } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .btn:active { transform: translateY(0); transition-duration: var(--d-1); } ```
## Debugging Animations ### DevTools Tips 1. **Animations Inspector** - Chrome DevTools → More tools → Animations - Control playback speed - Inspect keyframes 2. **Performance Panel** - Record animations - Check for jank - Monitor FPS
## Common Pitfalls ### 1. Animating Too Many Properties ```css /* ❌ Performance killer */ transition: all 0.3s; ``` ### 2. Not Using transform/opacity ```css /* ❌ Causes reflow */ transition: width 0.3s; ``` ### 3. Forgetting will-change ```css /* ✅ Prepare browser */ will-change: transform; ```
## Real-World Example ### Card Hover System ```css .card { --lift: 0; --shadow: 0 2px 4px rgba(0,0,0,0.1); transform: translateY(var(--lift)); box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; } .card:hover { --lift: -4px; --shadow: 0 8px 16px rgba(0,0,0,0.15); } ```
## Animation Tokens ### Create a Design System ```css :root { /* Motion tokens */ --motion-fade-in: fadeIn var(--d-3) var(--ease-2); --motion-slide-up: slideUp var(--d-3) var(--ease-3); --motion-scale: scale var(--d-2) var(--ease-1); /* Interaction tokens */ --interact-hover: transform var(--d-2) var(--ease-2); --interact-press: transform var(--d-1) var(--ease-1); } ```
## Testing Your Animations ### Performance Checklist - [ ] 60 FPS maintained? - [ ] GPU acceleration used? - [ ] Reduced motion respected? - [ ] Mobile performance good? - [ ] No layout thrashing?
## Future of CSS Animations ### Upcoming Features - **Scroll-driven animations** - **View Transitions API** - **Animation timeline** - **CSS Houdini** - **Container query animations**
## Resources & Tools ### Learning - MDN Web Docs - web.dev Performance guides - CSS Tricks animation articles ### Tools - Cubic-bezier.com - Animista.net - CSS Animation generator tools
## Summary ### Key Takeaways 1. **Use CSS Custom Properties** for consistency 2. **Animate transform & opacity** for performance 3. **Respect prefers-reduced-motion** 4. **Build utility classes** for reusability 5. **Test on real devices**
# Thank You! ## Questions? ### Remember: Great animations are invisible ### They enhance, not distract