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;
}

Slide In from Left

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}

Bounce

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation: bounce 1s ease;
}

Pulse (Attention Seeker)

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

.pulse {
  animation: pulse 2s ease infinite;
}

Loading Spinner

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

Button Hover

.button {
  transition: all 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Modal Entrance

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal {
  animation: modalFadeIn 0.3s ease-out;
}

/* Backdrop fade */
@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-backdrop {
  animation: backdropFadeIn 0.3s ease;
}

Shake (Error State)

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake {
  animation: shake 0.5s ease;
}

Skeleton Loading

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

Slide and Fade Menu

.menu {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu.open {
  transform: translateX(0);
  opacity: 1;
}

Timing Functions

Built-in Easings

/* Linear - constant speed */
transition: all 0.3s linear;

/* Ease (default) - slow start and end */
transition: all 0.3s ease;

/* Ease-in - slow start */
transition: all 0.3s ease-in;

/* Ease-out - slow end */
transition: all 0.3s ease-out;

/* Ease-in-out - slow start and end (more pronounced) */
transition: all 0.3s ease-in-out;

Custom Cubic Bezier

/* Bouncy */
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* Smooth */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Fast out, slow in */
transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);

Animation Properties Reference

Duration

animation-duration: 0.3s;   /* Fast */
animation-duration: 0.5s;   /* Normal */
animation-duration: 1s;     /* Slow */
animation-duration: 2s;     /* Very slow */

Iteration

animation-iteration-count: 1;        /* Once */
animation-iteration-count: 3;        /* Three times */
animation-iteration-count: infinite; /* Forever */

Direction

animation-direction: normal;    /* Forward */
animation-direction: reverse;   /* Backward */
animation-direction: alternate; /* Forward then backward */

Fill Mode

animation-fill-mode: none;      /* No persistence */
animation-fill-mode: forwards;  /* Keep final state */
animation-fill-mode: backwards; /* Start in first keyframe */
animation-fill-mode: both;      /* Both forwards and backwards */

Play State

animation-play-state: running; /* Playing */
animation-play-state: paused;  /* Paused */

Accessibility Considerations

I always include:

Reduced Motion Support

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

Avoid Problematic Patterns

• No rapid flashing (seizure risk)
• No parallax for vestibular disorders
• Provide controls for auto-playing animations
• Keep important animations essential, not decorative

Focus Indicators

.button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  transition: outline-offset 0.2s ease;
}

Performance Tips

✓ Animate transform and opacity only when possible ✓ Use will-change sparingly and temporarily ✓ Avoid animating width, height, top, left ✓ Keep animations under 300-500ms for UI interactions ✓ Test on low-end devices ✓ Use requestAnimationFrame for JavaScript animations ✓ Remove animations from elements outside viewport

Example Usage

You say: "Create a fade and slide up animation for cards appearing on page load"

I'll provide:

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeSlideUp 0.5s ease-out;
  animation-fill-mode: backwards;
}

/* Stagger the animations */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }
}

Just Ask!

Tell me what animation you need:

• "Fade in on page load"
• "Smooth color transition on hover"
• "Loading spinner"
• "Shake on error"
• "Slide in menu from left"
• "Pulse button to draw attention"

I'll create performant, accessible CSS animations for you!