animation-patternslisted
Install: claude install-skill Mattakushi432/Claude-Code-Skills-Custom-DevTools-Pack
# Animation Patterns
## CSS Animations
```css
/* Keyframe animation */
@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
animation: fade-up 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Stagger with custom property */
.card:nth-child(1) { --delay: 0ms; }
.card:nth-child(2) { --delay: 80ms; }
.card:nth-child(3) { --delay: 160ms; }
.card { animation-delay: var(--delay, 0ms); }
/* Composite-only properties: transform + opacity only */
```
## Scroll-Driven Animations (CSS)
```css
/* Animate on scroll without JS */
@keyframes reveal {
from { opacity: 0; translate: 0 40px; }
to { opacity: 1; translate: 0 0; }
}
.section {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 30%;
}
/* Progress bar tied to scroll */
.progress {
position: fixed; top: 0; left: 0; height: 4px;
background: var(--color-primary);
animation: grow-width linear;
animation-timeline: scroll(root block);
transform-origin: left;
}
@keyframes grow-width { from { scaleX: 0; } to { scaleX: 1; } }
```
## Web Animations API
```js
// Imperative animation with full control
const el = document.querySelector('.card');
const anim = el.animate(
[
{ opacity: 0, transform: 'translateY(20px)' },
{ opacity: 1, transform: 'translateY(0)' }
],
{ duration: 400, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' }
);
await anim.finished; // Promise resolves wh