css-animations

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: css-animations
description: Create performant CSS animations, transitions, and motion design
sasmp_version: "1.3.0"
version: "2.0.0"
updated: "2025-12-30"
bonded_agent: 03-css-animations
bond_type: PRIMARY_BOND
---

# CSS Animations Skill

Create performant, accessible CSS animations and transitions with proper timing and motion design.

## Overview

This skill provides atomic, focused guidance on CSS animations with performance optimization and accessibility considerations built-in.

## Skill Metadata

| Property | Value |
|----------|-------|
| **Category** | Motion |
| **Complexity** | Intermediate to Expert |
| **Dependencies** | css-fundamentals |
| **Bonded Agent** | 03-css-animations |

## Usage

```
Skill("css-animations")
```

## Parameter Schema

```yaml
parameters:
  animation_type:
    type: string
    required: true
    enum: [transition, keyframe, transform, timing]
    description: Type of animation to create

  effect:
    type: string
    required: false
    enum: [fade, slide, scale, rotate, bounce, shake, pulse]
    description: Predefined animation effect

  performance_mode:
    type: boolean
    required: false
    default: true
    description: Optimize for 60fps performance

  accessible:
    type: boolean
    required: false
    default: true
    description: Include reduced-motion alternatives

validation:
  - rule: animation_type_required
    message: "animation_type parameter is required"
  - rule: valid_effect
    message: "effect must be a recognized animation effect"
```

## Topics Covered

### Transitions
- Property, duration, timing-function, delay
- Transitionable vs non-transitionable properties
- Multi-property transitions

### Keyframe Animations
- @keyframes syntax
- Animation properties (name, duration, iteration, direction)
- Fill modes and play states

### Transforms
- 2D: translate, rotate, scale, skew
- 3D: perspective, rotateX/Y/Z, translateZ
- Transform origin and composition

### Timing Functions
- Built-in: ease, linear, ease-in, ease-out, ease-in-out
- cubic-bezier() custom curves
- steps() for frame-by-frame

## Retry Logic

```yaml
retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000
```

## Logging & Observability

```yaml
logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  metrics:
    - invocation_count
    - effect_usage
    - performance_mode_ratio
```

## Quick Reference

### Transition Template

```css
.element {
  transition: property duration timing-function delay;
  transition: transform 0.3s ease-out;
  transition: opacity 0.2s, transform 0.3s ease-out;
}
```

### Keyframe Template

```css
@keyframes animation-name {
  0% { /* start state */ }
  50% { /* midpoint state */ }
  100% { /* end state */ }
}

.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
  animation: slide-in 0.5s ease-out forwards;
}
```

### Performance Rules

```
SAFE (Compositor-only):
├─ transform
└─ opacity

AVOID (Trigger repaint/reflow):
├─ width, height
├─ top, left, right, bottom
├─ margin, padding
└─ background-color
```

## Common Effects

### Fade In

```css
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fade-in 0.3s ease-out forwards;
}
```

### Slide Up

```css
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slide-up 0.4s ease-out forwards;
}
```

### Pulse

```css
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}
```

### Accessibility Template

```css
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
```

## Timing Function Reference

```
cubi