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

code

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

code

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

code

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

javascript

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)