animation-creator

Animation Creator Skill

This skill helps you create performant, accessible CSS animations and transitions. I'll guide you through animation requirements and generate optimized code that respects user preferences and follows performance best practices.

What I Can Create

Transitions

• Hover effects
• Focus states
• Button interactions
• Modal/dropdown entrances
• Page transitions
• Property changes

Keyframe Animations

• Loading spinners
• Progress indicators
• Entrance animations
• Attention-seekers
• Scroll animations
• Complex sequences

Transform Animations

• Slides
• Fades
• Scales
• Rotations
• 3D effects
• Combined transforms

Micro-interactions

• Button presses
• Toggle switches
• Checkboxes
• Form validations
• Toast notifications
• Tooltips

How To Use This Skill

Tell me what you want to animate and I'll create the CSS. I'll ask:

1. What element are you animating?
2. What effect do you want? (fade, slide, bounce, etc.)
3. How long should it take? (duration)
4. When should it happen? (on hover, on load, on click?)
5. Should it repeat? (once, infinite, number of times)

Performance Best Practices

I always follow these rules for smooth animations:

Use Compositor-Only Properties

/* ✓ GOOD - GPU accelerated */
.animated {
  transition: transform 0.3s, opacity 0.3s;
}

/* ❌ BAD - Triggers layout/paint */
.animated {
  transition: width 0.3s, height 0.3s, left 0.3s;
}

Optimize with will-change

.animating {
  will-change: transform, opacity;
}

.animating.complete {
  will-change: auto; /* Remove after animation */
}

Respect Reduced Motion

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

Common Animation Examples

Fade In

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}