CSS Animations Skill Skill

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

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

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

Logging & Observability

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

Quick Reference

Transition Template

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

Keyframe Template

@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

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

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

Slide Up

@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

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

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

Accessibility Template

@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

cubic-bezier(x1, y1, x2, y2)

ease:        (0.25, 0.1, 0.25, 1.0)
ease-in:     (0.42, 0, 1.0, 1.0)
ease-out:    (0, 0, 0.58, 1.0)
ease-in-out: (0.42, 0, 0.58, 1.0)

Custom:
Bounce:      (0.68, -0.55, 0.265, 1.55)
Snap:        (0.5, 0, 0.75, 0)
Smooth:      (0.4, 0, 0.2, 1)

Test Template

describe('CSS Animations Skill', () => {
  test('validates animation_type parameter', () => {
    expect(() => skill({ animation_type: 'invalid' }))
      .toThrow('animation_type must be one of: transition, keyframe...');
  });

  test('returns accessible version when flag is true', () => {
    const result = skill({
      animation_type: 'keyframe',
      effect: 'fade',
      accessible: true
    });
    expect(result).toContain('prefers-reduced-motion');
  });

  test('uses compositor-only properties in performance mode', () => {
    const result = skill({
      animation_type: 'transform',
      performance_mode: true
    });
    expect(result).not.toContain('left:');
    expect(result).not.toContain('top:');
  });
});

Error Handling

| Error Code | Cause | Recovery | |------------|-------|----------| | INVALID_ANIMATION_TYPE | Unknown animation type | Show valid options | | PERFORMANCE_WARNING | Using layout-triggering properties | Suggest transform alternative | | ACCESSIBILITY_MISSING | No reduced-motion fallback | Add default accessible version |

Related Skills

css-fundamentals (prerequisite)
css-performance (animation optimization)
css-modern (scroll-driven animations)

Agent Skills: CSS Animations Skill

Skill Files