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:

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

Performance Best Practices

I always follow these rules for smooth animations:

Use Compositor-Only Properties

css

/* ✓ 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

css

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

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

Respect Reduced Motion

css

@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

css

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

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

Slide In from Left

css

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

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

Bounce

css

@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)

css

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

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

Loading Spinner

css

@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

css

.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

css

@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)

css

@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

css

@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

css

.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

css

/* 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

css

/* 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

css

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

Iteration

css

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

Direction

css

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

Fill Mode

css

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

css

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

Accessibility Considerations

I always include:

Reduced Motion Support

css

@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

css

.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:

css

@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!