Debug animation issues using Disney's principles as diagnostic framework.

Problem Indicators

Animation doesn't play at all
Animation plays but looks wrong
Works in dev, broken in production
Inconsistent across browsers
Animation triggers at wrong time
Flickering or visual glitches

Diagnosis by Principle

Timing

Issue: Animation timing is off Debug: Check duration values. Verify units (ms vs s). Check if CSS transition is being overridden. Inspect computed styles.

Straight Ahead vs Pose-to-Pose

Issue: Keyframes not hitting Debug: Verify all keyframe percentages. Check for typos in property names. Ensure values are animatable.

Staging

Issue: Animation hidden or clipped Debug: Check z-index, overflow, opacity. Verify element is in viewport. Check for visibility: hidden.

Solid Drawing

Issue: Visual glitches during animation Debug: Look for subpixel rendering issues. Add transform: translateZ(0) for GPU layer. Check for layout thrashing.

Follow Through

Issue: Animation ends abruptly or wrong state Debug: Check animation-fill-mode. Verify end state matches CSS. Check for competing animations.

Common Bugs

| No animation | Property not animatable | Use transform instead of changing property directly

| Flicker at start | No initial state | Set initial values explicitly

| Wrong end state | Fill mode | Add forwards to animation

| Choppy motion | Layout thrashing | Animate only transform/opacity

| Works once only | Animation not reset | Remove and re-add class, or use JS

Quick Fixes

Check DevTools Animation panel - See timeline
Verify animatable properties - Not all CSS animates
Add animation-fill-mode: forwards - Keep end state
Force GPU layer - will-change: transform
Check for !important - May override animation

Troubleshooting Checklist

Is animation class/trigger being applied? (DevTools Elements) Are properties animatable? (display is not, opacity is) Check computed styles for overrides Is element visible? (opacity, visibility, display, z-index) Any JavaScript errors blocking execution? Check Animation panel in DevTools Test in incognito (no extensions) Compare working vs broken environment

Code Pattern

// Debug: Log animation events
element.addEventListener('animationstart', (e) => {
  console.log('Animation started:', e.animationName);
});

element.addEventListener('animationend', (e) => {
  console.log('Animation ended:', e.animationName);
});

// Debug: Check computed animation
const styles = getComputedStyle(element);
console.log('Animation:', styles.animation);
console.log('Transition:', styles.transition);

// Reset animation
element.classList.remove('animate');
void element.offsetWidth; // Trigger reflow
element.classList.add('animate');

DevTools Tips

Elements > Styles: Check computed animation values
Performance tab: Record and analyze frames
Animations panel: Slow down, replay, inspect
Console: Log animation events

implementation-debugging

安装