[Feature]: add RTL support to motion APIs

[layershifter]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

Animations created by motion APIs (createPresenceComponent(), createMotionComponent()) could be directional i.e. "slide to left" or "slide to right". They would be defined for example, by the following keyframes:

const keyframes = [
  { transform: navDirection === 'left' ? 'translateX(-100%)' : 'translateX(100%)' },
  { transform: 'translateX(0%)' },
]

However, there is no currently a way to make such keyframes to flip in RTL.

Have you discussed this feature with our team

@ling1726

Additional context

N/A

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

High

[miroslavstastny]

• might be required for carousel, we need to check

[layershifter]

• might be required for carousel, we need to check

clarified: not needed