css-animation-creator

CSS Animation Creator

Instructions

When creating animations:

1. Understand the purpose - Feedback, delight, guidance, or storytelling
2. Choose the right technique - CSS transitions, keyframes, or JS libraries
3. Optimize for performance - GPU-accelerated properties only
4. Respect accessibility - Honor prefers-reduced-motion
5. Keep timing natural - Use appropriate easing and duration

Animation Principles

The 12 Principles (Disney) Applied to UI

Principle	UI Application
Squash & Stretch	Button press, elastic effects
Anticipation	Hover states before action
Staging	Focus attention on important elements
Follow Through	Overshoot then settle
Ease In/Out	Natural acceleration/deceleration
Arcs	Curved motion paths
Secondary Action	Supporting animations
Timing	Duration conveys weight/importance
Exaggeration	Emphasis for clarity
Appeal	Pleasing, polished motion

Timing Guidelines

Animation Type	Duration	Easing
Micro-interaction	100-200ms	ease-out
Button/hover	150-250ms	ease
Modal open	200-300ms	ease-out
Modal close	150-200ms	ease-in
Page transition	300-500ms	ease-in-out
Loading loop	1000-2000ms	linear/ease-in-out
Attention grab	500-1000ms	elastic

---

CSS Transitions

Basic Syntax

.element {
  /* Single property */
  transition: opacity 0.3s ease;

  /* Multiple properties */
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background-color 0.2s ease;

  /* Shorthand: property duration timing-function delay */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

Easing Functions

/* Built-in */
transition-timing-function: linear;
transition-timing-function: ease;        /* Default - slow start, fast middle, slow end */
transition-timing-function: ease-in;     /* Slow start */
transition-timing-function: ease-out;    /* Slow end */
transition-timing-function: ease-in-out; /* Slow start and end */

/* Custom cubic-bezier */
/* Material Design standard */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* Decelerate (entering) */
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

/* Accelerate (exiting) */
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

/* Bounce effect */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* Elastic */
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);