chore: add a CSS animation callbacks example

[MatiPl01]

Adds a screen under CSS > Animations > Miscellaneous that attaches all four animation callbacks and logs each event with its elapsedTime, so the timings can be checked against the spec.

Covers the cases that are easy to get wrong: a finite animation with a delay, an infinite one that never ends, and interrupting one mid-flight. The unmount button stays silent until #10255 lands, which is what makes that cancel reach the callback.

Stacked on #10071.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 7d4ae335-6043-4299-a4fe-5a0d5ca2a703

📥 Commits

Reviewing files that changed from the base of the PR and between 8b8a522 and a86fc14.

📒 Files selected for processing (1)

• apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/AnimationCallbacks.tsx

---

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Added an Animation Callbacks example to the CSS animations showcase.
  • Demonstrates finite and repeating animations with start, iteration, completion, and cancellation events.
  • Includes controls to restart, cancel, unmount, and clear the event log.
  • Displays elapsed callback times alongside an animated preview.

Walkthrough

Adds an AnimationCallbacks screen that demonstrates CSS animation lifecycle callbacks. Registers the screen in the miscellaneous animation collection and exposes it through the animation examples route.

Changes

Animation callbacks example

Layer / File(s)	Summary
Animation callback demo and registration apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/AnimationCallbacks.tsx, apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/index.ts, apps/common-app/src/apps/css/examples/animations/routes/index.ts	The new screen supports finite and infinite animations, cancellation, unmounting, restarting, event-log clearing, and elapsed-time callback logging. The screen is added to the miscellaneous animation registry and route list.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant AnimationCallbacks
  participant CSSKeyframesAnimation
  participant EventLog
  AnimationCallbacks->>CSSKeyframesAnimation: Start, restart, or cancel animation
  CSSKeyframesAnimation-->>AnimationCallbacks: Emit lifecycle callback
  AnimationCallbacks->>EventLog: Record event and elapsed time

Loading

Possibly related PRs

• software-mansion/react-native-reanimated#10071: Adds the native CSS animation callbacks exercised by this demo.

Suggested labels: lib: Reanimated

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely identifies the addition of a CSS animation callbacks example.
Description check	✅ Passed	The description accurately explains the new screen, callback logging, elapsed-time checks, and covered animation cases.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch @matipl01/css-animation-callbacks-example

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/AnimationCallbacks.tsx`:
- Around line 50-60: Update the restart flow around restart and the
Cancel/Unmount handlers to store the requestAnimationFrame handle, cancel any
pending frame before cancelling or unmounting, and clean it up when the screen
unmounts. Ensure the queued callback cannot restore animation properties after
cancellation.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 78c3c4aa-6668-4654-86b0-5e396560f147

📥 Commits

Reviewing files that changed from the base of the PR and between ad289d9 and 8b8a522.

📒 Files selected for processing (3)

• apps/common-app/src/apps/css/examples/animations/routes/index.ts
• apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/AnimationCallbacks.tsx
• apps/common-app/src/apps/css/examples/animations/screens/miscellaneous/index.ts

[tjzel]

LGTM

I wonder if we could also add ReJest tests for these callbacks - seems like easy win, not a heavy lift with smoking gun test.