# Animation Web Patterns

> Use when implementing web animations and transitions.

- Skill: `loopyluci/animation-web-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add loopyluci/animation-web-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/loopyluci/animation-web-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: LoopyLuci (https://skillmd.com/u/loopyluci)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/loopyluci/animation-web-patterns

---


# Web Animation Patterns

Implementing web animations — from CSS transitions and keyframes through Web Animations API, scroll-driven animations, and performance optimization.

## When to Use

- Adding UI animations for better user experience
- Implementing scroll-driven and intersection animations
- Building performant animations that don't jank
- Animating between routes and page transitions

## Animation Methods

```python
ANIMATION_METHODS = {
    'css_transitions': 'Declarative, GPU-accelerated, best for simple state changes',
    'css_keyframes': 'Multi-step animations, timing functions, can be GPU-accelerated',
    'web_animations_api': 'Programmatic control, better than JS setInterval, composable',
    'scroll_driven': 'Intersection Observer, Scroll Timeline — trigger on scroll position',
    'view_transitions': 'SPA route transitions between pages (Chrome 111+)',
}

# Web Animations API example
def animate_element(element, keyframes: List[Dict], duration: int = 300):
    import time
    anim = element.animate(keyframes, {
        'duration': duration, 'easing': 'ease-in-out',
        'fill': 'forwards'
    })
    return anim.finished  # Promise when done
```

## Common Pitfalls

1. **Animating layout properties** — animating width/height/top triggers layout; use transform + opacity
2. **No prefers-reduced-motion** — always respect user preference for reduced motion
3. **Too much animation** — overwhelming UI; use animation sparingly and purposefully
4. **Long durations** — animations >500ms feel slow; use 200-400ms for UI animations

## Verification Checklist

- [ ] Layout animations use transform (not width/height/top)
- [ ] prefers-reduced-motion respected
- [ ] Animation duration appropriate (200-400ms UI, 500-1000ms decorative)
- [ ] Animation curves feel natural (ease-out, cubic-bezier)
- [ ] No jank (60fps) — GPU-composited properties only
- [ ] Accessible: no flashing (epilepsy), motion respected