[Feature]: implement support for motion groups & sequences in @fluentui/react-motions-preview

[layershifter]

Library

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

Describe the feature that you would like added

To implement more complex motions like below:

gantt
    title Balloon movement motion
    dateFormat  YYYY
    axisFormat %Yms
    section Group 1
    opacity, 0 => 1 (1000ms) : 0000, 1000y
    transformX, 0 => 100px (500ms) : :a1, 0000, 500y
    section Group 2
    transformX, 100px => 200px (500ms) : :a1, 1001, 500y
    transformY, 0 => 200px (1000ms) : :a1, 1001, 1000y
    section Group 3
    opacity, 1 => 0 (500ms) : :a1, 2000, 500y

We need to get API support for that as current factories (createAtom(), createPresence()) support only a single keyframe definition. For context, check the discussion: https://github.com/microsoft/fluentui/pull/29958#discussion_r1486133836

Have you discussed this feature with our team

@microsoft/teams-prg @marcosmoura

Additional context

Prototype is available in #30531.

Validations

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

Priority

High