chore: adding appear animations to modal dialog and overlay

[georgewrmarshall]

Description

This PR adds entrance animations to our modal components while ensuring accessibility through proper motion reduction support. The changes include:

1. Modal Content Animation:

   • Added a smooth slide-up animation with fade-in effect (400ms duration)
   • Uses a custom cubic-bezier timing function for natural movement
   • Initial 24px offset for subtle entrance

2. Modal Overlay Animation:

   • Added fade-in animation (250ms duration)
   • Uses linear timing for consistent transparency transition

3. Accessibility Considerations:

   • All animations respect the user's motion preferences using prefers-reduced-motion
   • When reduced motion is preferred, content appears instantly without animation
   • Maintains full functionality while improving the experience for users who enjoy motion

These enhancements make our modals feel more polished while maintaining accessibility standards.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/4047

Manual testing steps

Testing Modal Motion

1. Open the storybook build to this PR
2. Search for Modal
3. Verify the modal overlay fades in smoothly
4. Verify the modal content slides up with a subtle animation
5. Test on different screen sizes to ensure animations remain smooth

Testing Prefers Reduced Motion

1. Open Dev Tools
2. Go to the kebab menu in the top right
3. Select More Tools > Redering
4. Scroll down to enable prefers reduced-motion
5. Verify animation of the modal is removed

Screenshots/Recordings

Before

Modal appears instantly without animation

before720.mov

After

Modal fades and slides in smoothly but removes animation when prefers-reduced-motion is enabled

modal.after720.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[georgewrmarshall]

Add prefers reduced motion media query to remove the animation

[vinnyhoward]

Love the addition of the media query for reduced motion

[metamaskbot]

Builds ready [fff51b1]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1642 ± 97 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1409	2059	1647	204	98
		domContentLoaded	1401	2051	1626	203	97
		load	1409	2059	1642	202	97
		domInteractive	22	87	41	23	11
		backgroundConnect	9	65	23	17	8
		firstReactRender	14	76	47	23	11
		getState	4	49	9	10	5
		initialActions	0	0	0	0	0
		loadScripts	903	1552	1163	176	84
		setupStore	5	11	8	2	1
		uiStartup	1591	2294	1828	214	103

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)