fix: CSS transition shorthand property behavior in react-native-web

[MatiPl01]

Summary

This PR fixes CSS transition properties being overridden by react-native-web. It happened because we didn't filter out CSS props from the style object passed to the component in the render() method of the AnimatedComponent.

I also made a few other changes to ensure that the transition shorthand is validated on web as well and preprocessed in a similar way to the native implementation.

Example Recordings

In the previous implementation, the transitionTimingFunction prop specified before the transition property shorthand was overriding the transition prop easing. Web also shown an error in the console that shorthand props shouldn't be mixed with longhand ones. We don't want this error to show up and want to support usage of both at the same time.

Web

Before	After
Screen.Recording.2025-02-13.at.14.28.49.mp4	Screen.Recording.2025-02-13.at.14.24.37.mp4

iOS

This recording is just for comparison to see that the behavior on web is also correct (the same as on the recording below) after changes implemented in this PR

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-02-13.at.14.25.02.mp4

Source code

/* eslint-disable perfectionist/sort-objects */
import React, { useReducer } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { createAnimatedComponent, steps } from 'react-native-reanimated';

const AnimatedView = createAnimatedComponent(View);

export default function EmptyExample() {
  const [state, toggleState] = useReducer((s) => !s, false);

  return (
    <View style={styles.container}>
      <AnimatedView
        style={{
          width: state ? 200 : 100,
          height: state ? 200 : 100,
          transform: [{ rotate: state ? '45deg' : '0deg' }],
          transitionTimingFunction: steps(2), // overridden by the shorthand
          backgroundColor: 'red',
          transition:
            '5s cubic-bezier(0, -0.54, 1, -0.5), transform 2s ease-in',
          transitionDuration: 1000, // overrides the shorthand
        }}
      />
      <Button title="Toggle width" onPress={toggleState} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
});

[MatiPl01]

I moved this removal of transition properties listed before the transition shorthand property to the filterCSSAndStyleProperties because it simplifies the logic and removing invalid properties as soon as possible seems to be a better solution for me.

[MatiPl01]

I decided to parse the transition shorthand on web as well in order to:

1. Ensure that behavior is always the same as in the mobile implementation
2. Because parseSingleTransitionShorthand already validates a correctness of the transition property shorthand

[piaskowyk]

I haven't tested it, but I didn't find anything controversial in these changes, so I can approve it 👍