Loading...
Loading...
Use when animation doesn't work as expected, has bugs, or behaves inconsistently
npx skill4agent add dylantarre/animation-principles implementation-debuggingvisibility: hiddentransform: translateZ(0)animation-fill-mode| Symptom | Likely Cause | Fix |
|---|---|---|
| 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 |
| Choppy motion | Layout thrashing | Animate only transform/opacity |
| Works once only | Animation not reset | Remove and re-add class, or use JS |
animation-fill-mode: forwardswill-change: transform!importantdisplayopacity// 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');