[Web LA] Custom Keyframe animations

[m-bert]

Summary

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

Important

This PR replaces #5277

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,
  },
});