Custom keyframe animations for web

[m-bert]

Caution

This PR was suppressed by #6135

Summary

This PR adds support for custom layout animations created via Keyframe on web.

Known limitations

Currently originX and originY don't work because in CSS there's only transform-origin property which needs both of those values at the same time (current approach doesn't make it easy to merge them).

Test plan

Tested on example app and the following code snippet:

Test code

import { StyleSheet, View, Text, Pressable } from 'react-native';

import React, { useState } from 'react';
import Animated, { Easing, Keyframe } from 'react-native-reanimated';

const entering = new Keyframe({
  0: {
    transform: [
      { translateX: -500 },
      { translateY: -300 },
      { scale: 1.25 },
      { skewY: '25deg' },
    ],
    opacity: 0.3,
    easing: Easing.cubic,
  },

  70: {
    transform: [{ translateX: 250 }, { translateY: 100 }, { scale: 1.25 }],
    opacity: 0.7,
  },
});
const exiting = new Keyframe({
  0: {
    easing: Easing.exp,
  },
  100: {
    transform: [
      { translateX: 700 },
      { translateY: 250 },
      { scale: 0.3 },
      { rotate: '225deg' },
    ],
    opacity: 0,
  },
});

export default function EmptyExample() {
  const [show, setShow] = useState(true);
  return (
    <View style={styles.container}>
      {show && (
        <Animated.View
          entering={entering.duration(1000)}
          exiting={exiting}
          style={styles.box}
        />
      )}

      <Pressable onPress={() => setShow((prev) => !prev)} style={styles.button}>
        <Text style={{ color: 'white' }}> Click me! </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 250,
    height: 250,
    backgroundColor: '#782aeb',
  },
  button: {
    width: 100,
    height: 50,
    backgroundColor: '#57b495',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
    borderRadius: 15,

    position: 'absolute',
    top: 10,
    left: 10,
  },
});

[piaskowyk]

Solid PR 🤝
Have you thought about implementing OriginX/Y as position absolute?

[m-bert]

I'm closing this PR since there are some conflicts after introducing monorepo structure (also my workspace in vscode froze while trying to merge current main into this branch).

These changes will be added in #6135.