diff --git a/apps/common-app/src/examples/RuntimeTests/ReJest/RuntimeTestsRunner.tsx b/apps/common-app/src/examples/RuntimeTests/ReJest/RuntimeTestsRunner.tsx
index ab4416ac13d..2ce7a2f53e2 100644
--- a/apps/common-app/src/examples/RuntimeTests/ReJest/RuntimeTestsRunner.tsx
+++ b/apps/common-app/src/examples/RuntimeTests/ReJest/RuntimeTestsRunner.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { runTests, configure } from './RuntimeTestsApi';
 import { RenderLock } from './utils/SyncUIRunner';
+import { FlatList } from 'react-native-gesture-handler';
 
 export class ErrorBoundary extends React.Component<
   { children: React.JSX.Element | Array<React.JSX.Element> },
@@ -72,18 +73,18 @@ export default function RuntimeTestsRunner({ tests }: RuntimeTestRunnerProps) {
   }
 
   return (
-    <View style={styles.container}>
+    <View style={styles.flexOne}>
       {started ? null : (
         <>
           <TestSelector tests={tests} testSelectionCallbacks={testSelectionCallbacks} />
-          <Pressable onPressOut={handleStartClick} style={styles.button}>
-            <Text style={styles.buttonTextWhite}>Run tests</Text>
+          <Pressable onPressOut={handleStartClick} style={button}>
+            <Text style={whiteText}>Run tests</Text>
           </Pressable>
         </>
       )}
       {/* Don't render anything if component is undefined to prevent blinking */}
       {component || null}
-      {finished ? <Text style={styles.reloadText}>Reload the app to run the tests again</Text> : null}
+      {finished ? <Text style={navyText}>Reload the app to run the tests again</Text> : null}
     </View>
   );
 }
@@ -122,22 +123,24 @@ function TestSelector({ tests, testSelectionCallbacks }: TestSelectorProps) {
   }
 
   return (
-    <View>
+    <View style={styles.flexOne}>
       <SelectAllButtonProps handleSelectAllClick={selectAllClick} select={true} />
       <SelectAllButtonProps handleSelectAllClick={selectAllClick} select={false} />
 
-      <View style={styles.selectButtonsFrame}>
-        {tests.map(testData => {
+      <FlatList
+        style={styles.selectButtonsFrame}
+        data={tests}
+        renderItem={({ item }) => {
           return (
             <SelectTest
-              key={testData.testSuiteName}
-              testSuiteName={testData.testSuiteName}
-              selectClick={() => selectClick(testData)}
+              key={item.testSuiteName}
+              testSuiteName={item.testSuiteName}
+              selectClick={() => selectClick(item)}
               selectedTests={selectedTests}
             />
           );
-        })}
-      </View>
+        }}
+      />
     </View>
   );
 }
@@ -166,8 +169,8 @@ function SelectTest({ testSuiteName, selectClick, selectedTests }: SelectTestPro
       onPressIn={() => handleSelectClickIn()}
       onPressOut={() => handleSelectClickOut()}>
       <View style={[styles.checkbox, selectedTests.get(testSuiteName) ? styles.checkedCheckbox : {}]} />
-      <View style={styles.selectButton}>
-        <Text style={styles.buttonText}>{testSuiteName}</Text>
+      <View style={selectButton}>
+        <Text style={navyText}>{testSuiteName}</Text>
       </View>
     </Pressable>
   );
@@ -194,28 +197,52 @@ function SelectAllButtonProps({ handleSelectAllClick, select }: SelectAllButtonP
     <Pressable
       onPressIn={handleSelectAllClickIn}
       onPressOut={() => handleSelectAllClickOut()}
-      style={[styles.selectAllButton, isPressed ? styles.pressedButton : {}]}>
-      <Text style={styles.buttonText}>{select ? 'Select all' : 'Deselect all'}</Text>
+      style={[selectAllButton, isPressed ? styles.pressedButton : {}]}>
+      <Text style={navyText}>{select ? 'Select all' : 'Deselect all'}</Text>
     </Pressable>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
+const commonStyles = StyleSheet.create({
+  textCommon: {
+    fontSize: 20,
+    alignSelf: 'center',
   },
-  selectAllButton: {
-    marginVertical: 5,
-    marginHorizontal: 20,
+  buttonCommon: {
     height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  whiteButtonCommon: {
     borderWidth: 2,
-    borderRadius: 10,
     backgroundColor: 'white',
     borderColor: 'navy',
-    justifyContent: 'center',
-    alignItems: 'center',
+    marginVertical: 5,
+    borderRadius: 10,
+  },
+});
+
+const basicStyles = StyleSheet.create({
+  selectAllButton: { marginHorizontal: 20 },
+  selectButton: { flex: 1 },
+  button: { backgroundColor: 'navy', zIndex: 1, height: 60, marginBottom: 40 },
+  navyText: { color: 'navy' },
+  whiteText: { color: 'white' },
+});
+
+const whiteButtonCommon = StyleSheet.flatten([commonStyles.buttonCommon, commonStyles.whiteButtonCommon]);
+const selectAllButton = StyleSheet.flatten([whiteButtonCommon, basicStyles.selectAllButton]);
+const selectButton = StyleSheet.flatten([whiteButtonCommon, basicStyles.selectButton]);
+const button = StyleSheet.flatten([commonStyles.buttonCommon, basicStyles.button]);
+const navyText = StyleSheet.flatten([commonStyles.textCommon, basicStyles.navyText]);
+const whiteText = StyleSheet.flatten([commonStyles.textCommon, basicStyles.whiteText]);
+
+const styles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+    flexDirection: 'column',
   },
+
   selectButtonsFrame: {
     borderRadius: 10,
     backgroundColor: 'lightblue',
@@ -223,32 +250,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 10,
   },
-  selectButton: {
-    height: 40,
-    borderWidth: 2,
-    marginVertical: 5,
-    borderRadius: 10,
-    backgroundColor: 'white',
-    borderColor: 'navy',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: 1,
-  },
-  button: {
-    height: 40,
-    backgroundColor: 'navy',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1,
-  },
-  buttonText: {
-    fontSize: 20,
-    color: 'navy',
-  },
-  buttonTextWhite: {
-    fontSize: 20,
-    color: 'white',
-  },
+
   buttonWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -266,11 +268,6 @@ const styles = StyleSheet.create({
   checkedCheckbox: {
     backgroundColor: 'navy',
   },
-  reloadText: {
-    fontSize: 20,
-    color: 'navy',
-    alignSelf: 'center',
-  },
   pressedButton: {
     zIndex: 2,
     backgroundColor: '#FFFA',
diff --git a/apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx b/apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx
index 5c21a436556..9c785255155 100644
--- a/apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx
+++ b/apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx
@@ -53,11 +53,16 @@ export default function RuntimeTestsExample() {
           },
         },
         {
-          testSuiteName: 'layoutAnimations',
+          testSuiteName: 'entering and exiting',
           importTest: () => {
             require('./tests/layoutAnimations/entering/enteringColors.test');
             require('./tests/layoutAnimations/entering/predefinedEntering.test');
             require('./tests/layoutAnimations/exiting/predefinedExiting.test');
+          },
+        },
+        {
+          testSuiteName: 'layout transitions',
+          importTest: () => {
             describe('Compare layout transitions with **constant view size** with snapshots', () => {
               require('./tests/layoutAnimations/layout/predefinedLayoutPosition.test');
             });
@@ -66,6 +71,12 @@ export default function RuntimeTestsExample() {
             });
           },
         },
+        {
+          testSuiteName: 'keyframe animations',
+          importTest: () => {
+            require('./tests/layoutAnimations/keyframe/basic.test');
+          },
+        },
         {
           testSuiteName: 'advanced API',
           importTest: () => {
diff --git a/apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/keyframe/basic.snapshot.test.tsx b/apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/keyframe/basic.snapshot.test.tsx
new file mode 100644
index 00000000000..f8e3828f9f3
--- /dev/null
+++ b/apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/keyframe/basic.snapshot.test.tsx
@@ -0,0 +1,1450 @@
+export const Snapshots = {
+  twirling: [
+    { transform: [{ translateY: 50 }, { rotate: '820deg' }, { scale: 0 }], opacity: 0 },
+    {
+      transform: [{ translateY: 48.4256 }, { rotate: '757.024deg' }, { scale: 0.031488000000000016 }],
+      opacity: 0.031488000000000016,
+    },
+    {
+      transform: [{ translateY: 46.9024 }, { rotate: '696.0959999999999deg' }, { scale: 0.06195200000000006 }],
+      opacity: 0.06195200000000006,
+    },
+    {
+      transform: [{ translateY: 45.4304 }, { rotate: '637.2160000000001deg' }, { scale: 0.09139199999999997 }],
+      opacity: 0.09139199999999997,
+    },
+    {
+      transform: [{ translateY: 44.0096 }, { rotate: '580.384deg' }, { scale: 0.11980800000000003 }],
+      opacity: 0.11980800000000003,
+    },
+    {
+      transform: [{ translateY: 42.64 }, { rotate: '525.5999999999999deg' }, { scale: 0.14720000000000005 }],
+      opacity: 0.14720000000000005,
+    },
+    {
+      transform: [
+        { translateY: 41.321600000000004 },
+        { rotate: '472.8640000000001deg' },
+        { scale: 0.17356799999999994 },
+      ],
+      opacity: 0.17356799999999994,
+    },
+    {
+      transform: [{ translateY: 40.0544 }, { rotate: '422.17600000000004deg' }, { scale: 0.19891199999999998 }],
+      opacity: 0.19891199999999998,
+    },
+    {
+      transform: [{ translateY: 38.8384 }, { rotate: '373.536deg' }, { scale: 0.22323199999999999 }],
+      opacity: 0.22323199999999999,
+    },
+    {
+      transform: [{ translateY: 37.6736 }, { rotate: '326.94399999999996deg' }, { scale: 0.24652800000000002 }],
+      opacity: 0.24652800000000002,
+    },
+    {
+      transform: [{ translateY: 36.56 }, { rotate: '282.4deg' }, { scale: 0.26880000000000004 }],
+      opacity: 0.26880000000000004,
+    },
+    {
+      transform: [{ translateY: 35.497600000000006 }, { rotate: '239.9040000000001deg' }, { scale: 0.290048 }],
+      opacity: 0.290048,
+    },
+    {
+      transform: [{ translateY: 34.4864 }, { rotate: '199.45600000000002deg' }, { scale: 0.310272 }],
+      opacity: 0.310272,
+    },
+    {
+      transform: [{ translateY: 33.5264 }, { rotate: '161.05600000000004deg' }, { scale: 0.329472 }],
+      opacity: 0.329472,
+    },
+    {
+      transform: [{ translateY: 32.6176 }, { rotate: '124.70400000000006deg' }, { scale: 0.34764799999999996 }],
+      opacity: 0.34764799999999996,
+    },
+    {
+      transform: [{ translateY: 31.759999999999998 }, { rotate: '90.39999999999998deg' }, { scale: 0.3648 }],
+      opacity: 0.3648,
+    },
+    {
+      transform: [{ translateY: 30.9536 }, { rotate: '58.144000000000005deg' }, { scale: 0.380928 }],
+      opacity: 0.380928,
+    },
+    {
+      transform: [
+        { translateY: 30.198399999999996 },
+        { rotate: '27.935999999999922deg' },
+        { scale: 0.39603200000000005 },
+      ],
+      opacity: 0.39603200000000005,
+    },
+    {
+      transform: [{ translateY: 29.494400000000002 }, { rotate: '-0.2239999999999327deg' }, { scale: 0.410112 }],
+      opacity: 0.410112,
+    },
+    {
+      transform: [{ translateY: 28.8416 }, { rotate: '-26.336000000000013deg' }, { scale: 0.423168 }],
+      opacity: 0.423168,
+    },
+    {
+      transform: [{ translateY: 28.24 }, { rotate: '-50.40000000000009deg' }, { scale: 0.43520000000000003 }],
+      opacity: 0.43520000000000003,
+    },
+    {
+      transform: [{ translateY: 27.6896 }, { rotate: '-72.41599999999994deg' }, { scale: 0.446208 }],
+      opacity: 0.446208,
+    },
+    {
+      transform: [{ translateY: 27.1904 }, { rotate: '-92.38400000000001deg' }, { scale: 0.456192 }],
+      opacity: 0.456192,
+    },
+    {
+      transform: [{ translateY: 26.7424 }, { rotate: '-110.30399999999997deg' }, { scale: 0.465152 }],
+      opacity: 0.465152,
+    },
+    {
+      transform: [{ translateY: 26.3456 }, { rotate: '-126.17600000000004deg' }, { scale: 0.473088 }],
+      opacity: 0.473088,
+    },
+    { transform: [{ translateY: 26 }, { rotate: '-140deg' }, { scale: 0.48 }], opacity: 0.48 },
+    {
+      transform: [{ translateY: 25.7056 }, { rotate: '-151.77599999999995deg' }, { scale: 0.485888 }],
+      opacity: 0.485888,
+    },
+    {
+      transform: [{ translateY: 25.4624 }, { rotate: '-161.50400000000002deg' }, { scale: 0.490752 }],
+      opacity: 0.490752,
+    },
+    {
+      transform: [{ translateY: 25.270400000000002 }, { rotate: '-169.18399999999997deg' }, { scale: 0.494592 }],
+      opacity: 0.494592,
+    },
+    {
+      transform: [{ translateY: 25.1296 }, { rotate: '-174.81600000000003deg' }, { scale: 0.497408 }],
+      opacity: 0.497408,
+    },
+    {
+      transform: [{ translateY: 25.040000000000003 }, { rotate: '-178.39999999999998deg' }, { scale: 0.4992 }],
+      opacity: 0.4992,
+    },
+    {
+      transform: [{ translateY: 25.0016 }, { rotate: '-179.93600000000004deg' }, { scale: 0.499968 }],
+      opacity: 0.499968,
+    },
+    { transform: [{ translateY: 25 }, { rotate: '-180deg' }, { scale: 0.5 }], opacity: 0.5 },
+    { transform: [{ translateY: 24.2 }, { rotate: '-174.24deg' }, { scale: 0.516 }], opacity: 0.516 },
+    { transform: [{ translateY: 23.4 }, { rotate: '-168.48deg' }, { scale: 0.532 }], opacity: 0.532 },
+    { transform: [{ translateY: 22.6 }, { rotate: '-162.72deg' }, { scale: 0.548 }], opacity: 0.548 },
+    {
+      transform: [{ translateY: 21.8 }, { rotate: '-156.96deg' }, { scale: 0.5640000000000001 }],
+      opacity: 0.5640000000000001,
+    },
+    { transform: [{ translateY: 21 }, { rotate: '-151.2deg' }, { scale: 0.58 }], opacity: 0.58 },
+    { transform: [{ translateY: 20.2 }, { rotate: '-145.44deg' }, { scale: 0.596 }], opacity: 0.596 },
+    { transform: [{ translateY: 19.4 }, { rotate: '-139.68deg' }, { scale: 0.612 }], opacity: 0.612 },
+    { transform: [{ translateY: 18.6 }, { rotate: '-133.92000000000002deg' }, { scale: 0.628 }], opacity: 0.628 },
+    { transform: [{ translateY: 17.8 }, { rotate: '-128.16deg' }, { scale: 0.644 }], opacity: 0.644 },
+    { transform: [{ translateY: 17 }, { rotate: '-122.4deg' }, { scale: 0.66 }], opacity: 0.66 },
+    {
+      transform: [{ translateY: 16.200000000000003 }, { rotate: '-116.64deg' }, { scale: 0.6759999999999999 }],
+      opacity: 0.6759999999999999,
+    },
+    { transform: [{ translateY: 15.4 }, { rotate: '-110.88deg' }, { scale: 0.692 }], opacity: 0.692 },
+    { transform: [{ translateY: 14.6 }, { rotate: '-105.12deg' }, { scale: 0.708 }], opacity: 0.708 },
+    { transform: [{ translateY: 13.799999999999999 }, { rotate: '-99.36deg' }, { scale: 0.724 }], opacity: 0.724 },
+    { transform: [{ translateY: 13 }, { rotate: '-93.60000000000001deg' }, { scale: 0.74 }], opacity: 0.74 },
+    { transform: [{ translateY: 12.2 }, { rotate: '-87.84deg' }, { scale: 0.756 }], opacity: 0.756 },
+    { transform: [{ translateY: 11.399999999999999 }, { rotate: '-82.08deg' }, { scale: 0.772 }], opacity: 0.772 },
+    {
+      transform: [{ translateY: 10.600000000000001 }, { rotate: '-76.32000000000001deg' }, { scale: 0.788 }],
+      opacity: 0.788,
+    },
+    { transform: [{ translateY: 9.8 }, { rotate: '-70.56deg' }, { scale: 0.804 }], opacity: 0.804 },
+    {
+      transform: [{ translateY: 9 }, { rotate: '-64.8deg' }, { scale: 0.8200000000000001 }],
+      opacity: 0.8200000000000001,
+    },
+    {
+      transform: [{ translateY: 8.2 }, { rotate: '-59.03999999999999deg' }, { scale: 0.8360000000000001 }],
+      opacity: 0.8360000000000001,
+    },
+    { transform: [{ translateY: 7.400000000000002 }, { rotate: '-53.28deg' }, { scale: 0.852 }], opacity: 0.852 },
+    {
+      transform: [{ translateY: 6.600000000000001 }, { rotate: '-47.52000000000001deg' }, { scale: 0.868 }],
+      opacity: 0.868,
+    },
+    {
+      transform: [{ translateY: 5.800000000000001 }, { rotate: '-41.75999999999999deg' }, { scale: 0.884 }],
+      opacity: 0.884,
+    },
+    { transform: [{ translateY: 5 }, { rotate: '-36deg' }, { scale: 0.9 }], opacity: 0.9 },
+    {
+      transform: [
+        { translateY: 4.199999999999999 },
+        { rotate: '-30.24000000000001deg' },
+        { scale: 0.9159999999999999 },
+      ],
+      opacity: 0.9159999999999999,
+    },
+    {
+      transform: [
+        { translateY: 3.3999999999999986 },
+        { rotate: '-24.47999999999999deg' },
+        { scale: 0.9319999999999999 },
+      ],
+      opacity: 0.9319999999999999,
+    },
+    { transform: [{ translateY: 2.599999999999998 }, { rotate: '-18.72deg' }, { scale: 0.948 }], opacity: 0.948 },
+    {
+      transform: [{ translateY: 1.7999999999999972 }, { rotate: '-12.95999999999998deg' }, { scale: 0.964 }],
+      opacity: 0.964,
+    },
+    { transform: [{ translateY: 1 }, { rotate: '-7.200000000000017deg' }, { scale: 0.98 }], opacity: 0.98 },
+    {
+      transform: [{ translateY: 0.1999999999999993 }, { rotate: '-1.4399999999999977deg' }, { scale: 0.996 }],
+      opacity: 0.996,
+    },
+    { transform: [{ translateY: 0 }, { rotate: '0deg' }, { scale: 1 }], opacity: 1 },
+  ],
+  rainbowPulsar: [
+    { backgroundColor: '#ff0000ff', transform: [{ scale: 2 }] },
+    { backgroundColor: '#ff0f00ff', transform: [{ scale: 1.8933333333333333 }] },
+    { backgroundColor: '#ff1c00ff', transform: [{ scale: 1.7866666666666666 }] },
+    { backgroundColor: '#ff2900ff', transform: [{ scale: 1.68 }] },
+    { backgroundColor: '#ff3500ff', transform: [{ scale: 1.5733333333333333 }] },
+    { backgroundColor: '#ff4100ff', transform: [{ scale: 1.4666666666666668 }] },
+    { backgroundColor: '#ff4c00ff', transform: [{ scale: 1.3599999999999999 }] },
+    { backgroundColor: '#ff5800ff', transform: [{ scale: 1.2533333333333334 }] },
+    { backgroundColor: '#ff6300ff', transform: [{ scale: 1.1466666666666665 }] },
+    { backgroundColor: '#ff6e00ff', transform: [{ scale: 1.04 }] },
+    { backgroundColor: '#ff7900ff', transform: [{ scale: 1 }] },
+    { backgroundColor: '#ff8400ff', transform: [{ scale: 1.0113777777777777 }] },
+    { backgroundColor: '#ff8f00ff', transform: [{ scale: 1.045511111111111 }] },
+    { backgroundColor: '#ff9a00ff', transform: [{ scale: 1.1024 }] },
+    { backgroundColor: '#ffa500ff', transform: [{ scale: 1.1820444444444445 }] },
+    { backgroundColor: '#ffb000ff', transform: [{ scale: 1.2844444444444445 }] },
+    { backgroundColor: '#ffba00ff', transform: [{ scale: 1.4096 }] },
+    { backgroundColor: '#ffc500ff', transform: [{ scale: 1.5575111111111113 }] },
+    { backgroundColor: '#ffcf00ff', transform: [{ scale: 1.7281777777777778 }] },
+    { backgroundColor: '#ffd700ff', transform: [{ scale: 1.9216 }] },
+    { backgroundColor: '#ffd700ff', transform: [{ scale: 2 }] },
+    { backgroundColor: '#ffd700ff', transform: [{ scale: 1.9987863703703703 }] },
+    { backgroundColor: '#ffd700ff', transform: [{ scale: 1.990290962962963 }] },
+    { backgroundColor: '#ffd700ff', transform: [{ scale: 1.967232 }] },
+    { backgroundColor: '#ffd701ff', transform: [{ scale: 1.9223277037037036 }] },
+    { backgroundColor: '#ffd701ff', transform: [{ scale: 1.8482962962962963 }] },
+    { backgroundColor: '#ffd703ff', transform: [{ scale: 1.7378559999999998 }] },
+    { backgroundColor: '#ffd705ff', transform: [{ scale: 1.583725037037037 }] },
+    { backgroundColor: '#ffd709ff', transform: [{ scale: 1.3786216296296296 }] },
+    { backgroundColor: '#ffd70fff', transform: [{ scale: 1.1152640000000003 }] },
+    { backgroundColor: '#fed717ff', transform: [{ scale: 1 }] },
+    { backgroundColor: '#fed622ff', transform: [{ scale: 1.0000000001906721 }] },
+    { backgroundColor: '#fcd430ff', transform: [{ scale: 1.000000195248269 }] },
+    { backgroundColor: '#f9d244ff', transform: [{ scale: 1.0000112589990684 }] },
+    { backgroundColor: '#f2cc5cff', transform: [{ scale: 1.0001999342276275 }] },
+    { backgroundColor: '#e6c27cff', transform: [{ scale: 1.0018620325962777 }] },
+    { backgroundColor: '#ceaea3ff', transform: [{ scale: 1.0115292150460684 }] },
+    { backgroundColor: '#9b83d4ff', transform: [{ scale: 1.0538601596190362 }] },
+    { backgroundColor: '#0000ffff', transform: [{ scale: 1.204732649090523 }] },
+    { backgroundColor: '#0000ffff', transform: [{ scale: 1.6648326359915009 }] },
+    { backgroundColor: '#0100ffff', transform: [{ scale: 2 }] },
+    { backgroundColor: '#0300ffff', transform: [{ scale: 1.9998705461728394 }] },
+    { backgroundColor: '#0600ffff', transform: [{ scale: 1.997928738765432 }] },
+    { backgroundColor: '#0a00ffff', transform: [{ scale: 1.98951424 }] },
+    { backgroundColor: '#0f00feff', transform: [{ scale: 1.9668598202469136 }] },
+    { backgroundColor: '#1500fdff', transform: [{ scale: 1.9190913580246913 }] },
+    { backgroundColor: '#1c00fcff', transform: [{ scale: 1.83222784 }] },
+    { backgroundColor: '#2500f9ff', transform: [{ scale: 1.6891813609876543 }] },
+    { backgroundColor: '#2e00f5ff', transform: [{ scale: 1.4697571239506173 }] },
+    { backgroundColor: '#3a00efff', transform: [{ scale: 1.1506534400000001 }] },
+    { backgroundColor: '#4600e5ff', transform: [{ scale: 1 }] },
+    { backgroundColor: '#5400d7ff', transform: [{ scale: 1.0001048576 }] },
+    { backgroundColor: '#6400c2ff', transform: [{ scale: 1.0033554432 }] },
+    { backgroundColor: '#7500a1ff', transform: [{ scale: 1.0254803968 }] },
+    { backgroundColor: '#800080ff', transform: [{ scale: 1.1073741824 }] },
+    { backgroundColor: '#800080ff', transform: [{ scale: 1.32768 }] },
+    { backgroundColor: '#800080ff', transform: [{ scale: 1.8153726976 }] },
+    { backgroundColor: '#800080ff', transform: [{ scale: 2 }] },
+    { backgroundColor: '#810080ff', transform: [{ scale: 1.999998527103122 }] },
+    { backgroundColor: '#85007fff', transform: [{ scale: 1.9999057345998135 }] },
+    { backgroundColor: '#8d007cff', transform: [{ scale: 1.998926258176 }] },
+    { backgroundColor: '#9f0075ff', transform: [{ scale: 1.9939670143880603 }] },
+    { backgroundColor: '#be0067ff', transform: [{ scale: 1.976985986282579 }] },
+    { backgroundColor: '#ea0040ff', transform: [{ scale: 1.931280523264 }] },
+    { backgroundColor: '#ff0000ff', transform: [{ scale: 1.8267151552101837 }] },
+    { backgroundColor: '#ff0000ff', transform: [{ scale: 1.6138889208358627 }] },
+    { backgroundColor: '#ff0000ff', transform: [{ scale: 1.2172422103040001 }] },
+    { backgroundColor: '#ff0000ff', transform: [{ scale: 1 }] },
+  ],
+  rotateAroundCorner: [
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '0deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '5.76deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '11.52deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '17.28deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '23.04deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '28.8deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '34.56deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '40.32deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '46.08deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '51.839999999999996deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '57.6deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '63.36deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '69.12deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '74.88deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '80.64deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '86.39999999999999deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '92.16deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '97.92deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '103.67999999999999deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '109.44deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '115.2deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '120.96000000000001deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '126.72deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '132.48deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '138.24deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '144deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '149.76deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '155.52deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '161.28deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '167.04000000000002deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '172.79999999999998deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '178.56deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '184.32deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '190.08deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '195.84deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '201.60000000000002deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '207.35999999999999deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '213.11999999999998deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '218.88deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '224.64deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '230.4deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '236.16deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '241.92000000000002deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '247.67999999999998deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '253.44deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '259.2deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '264.96deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '270.72deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '276.48deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '282.24deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '288deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '293.76deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '299.52deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '305.28deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '311.04deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '316.8deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '322.56deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '328.32deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '334.08000000000004deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '339.84deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '345.59999999999997deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '351.36deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '357.12deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '360deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+  ],
+  changeBorders: [
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 5, borderRadius: 20 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 5.16, borderRadius: 20.96 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 5.32, borderRadius: 21.92 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 5.48, borderRadius: 22.88 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 5.64, borderRadius: 23.84 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 5.8, borderRadius: 24.8 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 5.96, borderRadius: 25.759999999999998 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 6.12, borderRadius: 26.72 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 6.28, borderRadius: 27.68 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 6.4399999999999995, borderRadius: 28.64 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 6.6, borderRadius: 29.6 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 6.76, borderRadius: 30.56 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 6.92, borderRadius: 31.52 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 7.08, borderRadius: 32.48 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 7.24, borderRadius: 33.44 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 7.4, borderRadius: 34.4 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 7.5600000000000005, borderRadius: 35.36 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 7.720000000000001, borderRadius: 36.32 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 7.88, borderRadius: 37.28 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 8.04, borderRadius: 38.239999999999995 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 8.2, borderRadius: 39.2 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 8.36, borderRadius: 40.16 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 8.52, borderRadius: 41.12 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 8.68, borderRadius: 42.08 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 8.84, borderRadius: 43.04 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 9, borderRadius: 44 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 9.16, borderRadius: 44.959999999999994 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 9.32, borderRadius: 45.92 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 9.48, borderRadius: 46.879999999999995 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 9.64, borderRadius: 47.84 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 9.8, borderRadius: 48.8 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 9.96, borderRadius: 49.76 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 10, borderRadius: 50 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 11.28, borderRadius: 49.84 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 12.56, borderRadius: 49.68 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 13.84, borderRadius: 49.52 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 15.120000000000001, borderRadius: 49.36 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 16.4, borderRadius: 49.2 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 17.68, borderRadius: 49.04 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 18.96, borderRadius: 48.88 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 20.240000000000002, borderRadius: 48.72 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 21.52, borderRadius: 48.56 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 22.8, borderRadius: 48.4 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 24.08, borderRadius: 48.24 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 25.36, borderRadius: 48.08 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 26.64, borderRadius: 47.92 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 27.92, borderRadius: 47.76 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 29.2, borderRadius: 47.6 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 30.48, borderRadius: 47.44 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 31.76, borderRadius: 47.28 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 33.04, borderRadius: 47.12 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 34.32, borderRadius: 46.96 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 35.6, borderRadius: 46.8 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 36.88, borderRadius: 46.64 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 38.16, borderRadius: 46.480000000000004 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 39.44, borderRadius: 46.32 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 40.72, borderRadius: 46.16 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 42, borderRadius: 46 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 43.28, borderRadius: 45.84 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 44.56, borderRadius: 45.68 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 45.84, borderRadius: 45.519999999999996 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 47.120000000000005, borderRadius: 45.36 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 48.4, borderRadius: 45.2 },
+    { borderColor: 4281290575, backgroundColor: '#3cb371ff', borderWidth: 49.68, borderRadius: 45.04 },
+    { borderColor: 4281290575, backgroundColor: '#e7d036ff', borderWidth: 50, borderRadius: 45 },
+    { borderColor: 4281290575, backgroundColor: '#ffd700ff', borderWidth: 50, borderRadius: 45 },
+    { borderColor: 4281290575, backgroundColor: '#ffd700ff', borderWidth: 50, borderRadius: 45 },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 49.183673469387756,
+      borderRadius: 44.3469387755102,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 48.36734693877551,
+      borderRadius: 43.69387755102041,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 47.55102040816327,
+      borderRadius: 43.04081632653061,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 46.734693877551024,
+      borderRadius: 42.38775510204081,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 45.91836734693877,
+      borderRadius: 41.734693877551024,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 45.10204081632653,
+      borderRadius: 41.08163265306123,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 44.285714285714285,
+      borderRadius: 40.42857142857143,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 43.46938775510204,
+      borderRadius: 39.775510204081634,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 42.6530612244898,
+      borderRadius: 39.12244897959184,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 41.83673469387755,
+      borderRadius: 38.46938775510204,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 41.02040816326531,
+      borderRadius: 37.816326530612244,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 40.20408163265306,
+      borderRadius: 37.16326530612245,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 39.38775510204081,
+      borderRadius: 36.51020408163265,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 38.57142857142857,
+      borderRadius: 35.85714285714286,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 37.755102040816325,
+      borderRadius: 35.20408163265306,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 36.93877551020408,
+      borderRadius: 34.55102040816327,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 36.12244897959184,
+      borderRadius: 33.89795918367347,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 35.30612244897959,
+      borderRadius: 33.244897959183675,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 34.48979591836735,
+      borderRadius: 32.59183673469388,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 33.673469387755105,
+      borderRadius: 31.93877551020408,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 32.85714285714286,
+      borderRadius: 31.285714285714285,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 32.04081632653062,
+      borderRadius: 30.63265306122449,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 31.224489795918366,
+      borderRadius: 29.97959183673469,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 30.408163265306122,
+      borderRadius: 29.3265306122449,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 29.591836734693878,
+      borderRadius: 28.6734693877551,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 28.775510204081634,
+      borderRadius: 28.02040816326531,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 27.959183673469386,
+      borderRadius: 27.36734693877551,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 27.142857142857142,
+      borderRadius: 26.714285714285715,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 26.3265306122449,
+      borderRadius: 26.06122448979592,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 25.510204081632654,
+      borderRadius: 25.408163265306122,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 24.69387755102041,
+      borderRadius: 24.75510204081633,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 23.877551020408163,
+      borderRadius: 24.10204081632653,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 23.06122448979592,
+      borderRadius: 23.448979591836732,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 22.244897959183675,
+      borderRadius: 22.79591836734694,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 21.42857142857143,
+      borderRadius: 22.142857142857146,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 20.61224489795918,
+      borderRadius: 21.489795918367346,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 19.79591836734694,
+      borderRadius: 20.83673469387755,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 18.979591836734695,
+      borderRadius: 20.183673469387756,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 18.16326530612245,
+      borderRadius: 19.53061224489796,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 17.346938775510203,
+      borderRadius: 18.877551020408166,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 16.53061224489796,
+      borderRadius: 18.224489795918366,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 15.714285714285715,
+      borderRadius: 17.57142857142857,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 14.897959183673471,
+      borderRadius: 16.918367346938776,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 14.081632653061227,
+      borderRadius: 16.265306122448983,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 13.265306122448976,
+      borderRadius: 15.612244897959183,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 12.448979591836732,
+      borderRadius: 14.959183673469386,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 11.632653061224488,
+      borderRadius: 14.306122448979593,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 10.816326530612244,
+      borderRadius: 13.653061224489797,
+    },
+    { borderColor: 4281290575, backgroundColor: '#ffd700ff', borderWidth: 10, borderRadius: 13 },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 9.183673469387756,
+      borderRadius: 12.346938775510203,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 8.367346938775512,
+      borderRadius: 11.693877551020407,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 7.551020408163268,
+      borderRadius: 11.040816326530617,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 6.734693877551017,
+      borderRadius: 10.387755102040813,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 5.918367346938773,
+      borderRadius: 9.734693877551017,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 5.102040816326529,
+      borderRadius: 9.081632653061227,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 4.285714285714285,
+      borderRadius: 8.42857142857143,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 3.4693877551020407,
+      borderRadius: 7.775510204081634,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 2.6530612244897966,
+      borderRadius: 7.122448979591837,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 1.8367346938775526,
+      borderRadius: 6.469387755102041,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 1.0204081632653086,
+      borderRadius: 5.816326530612244,
+    },
+    {
+      borderColor: 4281290575,
+      backgroundColor: '#ffd700ff',
+      borderWidth: 0.20408163265306456,
+      borderRadius: 5.1632653061224545,
+    },
+    { borderColor: 4281290575, backgroundColor: '#ffd700ff', borderWidth: 0, borderRadius: 5 },
+  ],
+  elastic: [
+    { transform: [{ translateY: 0 }] },
+    { transform: [{ translateY: 6.329249304264684 }] },
+    { transform: [{ translateY: 24.904659781343106 }] },
+    { transform: [{ translateY: 54.5168250488705 }] },
+    { transform: [{ translateY: 93.2401918405426 }] },
+    { transform: [{ translateY: 138.56174431963456 }] },
+    { transform: [{ translateY: 187.5486287580263 }] },
+    { transform: [{ translateY: 237.04324780571554 }] },
+    { transform: [{ translateY: 283.87250834297856 }] },
+    { transform: [{ translateY: 325.05699235586735 }] },
+    { transform: [{ translateY: 358.00589696258635 }] },
+    { transform: [{ translateY: 380.6846476298009 }] },
+    { transform: [{ translateY: 391.7440481911261 }] },
+    { transform: [{ translateY: 390.6025494536923 }] },
+    { transform: [{ translateY: 377.4764990091266 }] },
+    { transform: [{ translateY: 353.3568439074269 }] },
+    { transform: [{ translateY: 319.9344392333474 }] },
+    { transform: [{ translateY: 279.4796105463126 }] },
+    { transform: [{ translateY: 234.68468344943264 }] },
+    { transform: [{ translateY: 188.4806190022621 }] },
+    { transform: [{ translateY: 143.840516699907 }] },
+    { transform: [{ translateY: 103.58346351438901 }] },
+    { transform: [{ translateY: 70.19197979593966 }] },
+    { transform: [{ translateY: 45.65516992319636 }] },
+    { transform: [{ translateY: 31.347721260909346 }] },
+    { transform: [{ translateY: 27.95225994110333 }] },
+    { transform: [{ translateY: 35.42946222861405 }] },
+    { transform: [{ translateY: 53.03696230560859 }] },
+    { transform: [{ translateY: 79.39473154773434 }] },
+    { transform: [{ translateY: 112.59146740841848 }] },
+    { transform: [{ translateY: 150.32383788622005 }] },
+    { transform: [{ translateY: 190.05836044318073 }] },
+    { transform: [{ translateY: 229.20438431082292 }] },
+    { transform: [{ translateY: 265.2861678542608 }] },
+    { transform: [{ translateY: 296.10241261116226 }] },
+    { transform: [{ translateY: 319.86278661455805 }] },
+    { transform: [{ translateY: 335.2928394109554 }] },
+    { transform: [{ translateY: 341.7011301255709 }] },
+    { transform: [{ translateY: 339.0051728005039 }] },
+    { transform: [{ translateY: 327.71574353431305 }] },
+    { transform: [{ translateY: 308.8819793352086 }] },
+    { transform: [{ translateY: 284.0023263924045 }] },
+    { transform: [{ translateY: 254.90858710286065 }] },
+    { transform: [{ translateY: 223.6319284999308 }] },
+    { transform: [{ translateY: 192.2606532693646 }] },
+    { transform: [{ translateY: 162.7997532857467 }] },
+    { transform: [{ translateY: 137.04177273841898 }] },
+    { transform: [{ translateY: 116.4573626321035 }] },
+    { transform: [{ translateY: 102.1122150654282 }] },
+    { transform: [{ translateY: 94.61496462502326 }] },
+    { transform: [{ translateY: 94.09830056250526 }] },
+    { transform: [{ translateY: 100.23312399006232 }] },
+    { transform: [{ translateY: 112.27328438347021 }] },
+    { transform: [{ translateY: 129.1264000558864 }] },
+    { transform: [{ translateY: 149.4446430709001 }] },
+    { transform: [{ translateY: 171.72825065869966 }] },
+    { transform: [{ translateY: 194.43397207298145 }] },
+    { transform: [{ translateY: 216.0806877389006 }] },
+    { transform: [{ translateY: 235.34501904266926 }] },
+    { transform: [{ translateY: 251.14081527148588 }] },
+    { transform: [{ translateY: 262.6778591760666 }] },
+    { transform: [{ translateY: 269.49685040393615 }] },
+    { transform: [{ translateY: 271.47956876474916 }] },
+    { transform: [{ translateY: 268.8349460833024 }] },
+    { transform: [{ translateY: 262.06345312191206 }] },
+    { transform: [{ translateY: 251.9036209321463 }] },
+    { transform: [{ translateY: 239.2655735576906 }] },
+    { transform: [{ translateY: 225.15709177115676 }] },
+    { transform: [{ translateY: 210.60793005041236 }] },
+    { transform: [{ translateY: 196.59788021390895 }] },
+    { transform: [{ translateY: 183.9934560026981 }] },
+    { transform: [{ translateY: 173.49713172266183 }] },
+    { transform: [{ translateY: 165.6118938988759 }] },
+    { transform: [{ translateY: 160.62255966464215 }] },
+    { transform: [{ translateY: 158.59398558358134 }] },
+    { transform: [{ translateY: 159.3850379708867 }] },
+    { transform: [{ translateY: 162.67611093255096 }] },
+    { transform: [{ translateY: 168.00713347960027 }] },
+    { transform: [{ translateY: 174.82245156104693 }] },
+    { transform: [{ translateY: 182.51872861599648 }] },
+    { transform: [{ translateY: 190.4920773002743 }] },
+    { transform: [{ translateY: 198.18098916310282 }] },
+    { transform: [{ translateY: 205.10222122451785 }] },
+    { transform: [{ translateY: 210.87756581012584 }] },
+    { transform: [{ translateY: 215.25029996511432 }] },
+    { transform: [{ translateY: 218.0910072106835 }] },
+    { transform: [{ translateY: 219.39331418137894 }] },
+    { transform: [{ translateY: 219.26082334666827 }] },
+    { transform: [{ translateY: 217.88709954202164 }] },
+    { transform: [{ translateY: 215.530948131366 }] },
+    { transform: [{ translateY: 212.4893905184369 }] },
+    { transform: [{ translateY: 209.07070126285024 }] },
+    { transform: [{ translateY: 205.5696402476186 }] },
+    { transform: [{ translateY: 202.2466275532781 }] },
+    { transform: [{ translateY: 199.31211278204813 }] },
+    { transform: [{ translateY: 196.91683538517344 }] },
+    { transform: [{ translateY: 195.14811014408485 }] },
+    { transform: [{ translateY: 194.03175106373814 }] },
+    { transform: [{ translateY: 193.53880893666033 }] },
+    { transform: [{ translateY: 193.59597366351278 }] },
+    { transform: [{ translateY: 194.09830056250524 }] },
+    { transform: [{ translateY: 194.92286564730819 }] },
+    { transform: [{ translateY: 195.94203073089514 }] },
+    { transform: [{ translateY: 197.03518657538137 }] },
+    { transform: [{ translateY: 198.09811382469167 }] },
+    { transform: [{ translateY: 199.04942423963837 }] },
+    { transform: [{ translateY: 199.83388380227157 }] },
+    { transform: [{ translateY: 200.42274087983768 }] },
+    { transform: [{ translateY: 200.81145755493276 }] },
+    { transform: [{ translateY: 201.01544804517277 }] },
+    { transform: [{ translateY: 201.06455103025195 }] },
+    { transform: [{ translateY: 200.99699817708222 }] },
+    { transform: [{ translateY: 200.85359383210536 }] },
+    { transform: [{ translateY: 200.67270340851275 }] },
+    { transform: [{ translateY: 200.486479342362 }] },
+    { transform: [{ translateY: 200.318556428594 }] },
+    { transform: [{ translateY: 200.18324697039108 }] },
+    { transform: [{ translateY: 200.086083268979 }] },
+    { transform: [{ translateY: 200.02540968728502 }] },
+    { transform: [{ translateY: 199.99463249172493 }] },
+    { transform: [{ translateY: 199.98469988873688 }] },
+    { transform: [{ translateY: 199.98640700069473 }] },
+    { transform: [{ translateY: 199.99219408962355 }] },
+    { transform: [{ translateY: 199.99721856745415 }] },
+    { transform: [{ translateY: 199.9996156187351 }] },
+    { transform: [{ translateY: 200 }] },
+  ],
+  linear: [
+    { transform: [{ translateY: 0 }] },
+    { transform: [{ translateY: 6.4 }] },
+    { transform: [{ translateY: 12.8 }] },
+    { transform: [{ translateY: 19.2 }] },
+    { transform: [{ translateY: 25.6 }] },
+    { transform: [{ translateY: 32 }] },
+    { transform: [{ translateY: 38.4 }] },
+    { transform: [{ translateY: 44.800000000000004 }] },
+    { transform: [{ translateY: 51.2 }] },
+    { transform: [{ translateY: 57.599999999999994 }] },
+    { transform: [{ translateY: 64 }] },
+    { transform: [{ translateY: 70.39999999999999 }] },
+    { transform: [{ translateY: 76.8 }] },
+    { transform: [{ translateY: 83.2 }] },
+    { transform: [{ translateY: 89.60000000000001 }] },
+    { transform: [{ translateY: 96 }] },
+    { transform: [{ translateY: 102.4 }] },
+    { transform: [{ translateY: 108.80000000000001 }] },
+    { transform: [{ translateY: 115.19999999999999 }] },
+    { transform: [{ translateY: 121.6 }] },
+    { transform: [{ translateY: 128 }] },
+    { transform: [{ translateY: 134.4 }] },
+    { transform: [{ translateY: 140.79999999999998 }] },
+    { transform: [{ translateY: 147.2 }] },
+    { transform: [{ translateY: 153.6 }] },
+    { transform: [{ translateY: 160 }] },
+    { transform: [{ translateY: 166.4 }] },
+    { transform: [{ translateY: 172.8 }] },
+    { transform: [{ translateY: 179.20000000000002 }] },
+    { transform: [{ translateY: 185.60000000000002 }] },
+    { transform: [{ translateY: 192 }] },
+    { transform: [{ translateY: 198.4 }] },
+    { transform: [{ translateY: 200 }] },
+  ],
+};
diff --git a/apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/keyframe/basic.test.tsx b/apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/keyframe/basic.test.tsx
new file mode 100644
index 00000000000..483089e7a0e
--- /dev/null
+++ b/apps/common-app/src/examples/RuntimeTests/tests/layoutAnimations/keyframe/basic.test.tsx
@@ -0,0 +1,194 @@
+import { StyleSheet, View } from 'react-native';
+import Animated, { Easing, Keyframe } from 'react-native-reanimated';
+import React from 'react';
+import {
+  describe,
+  test,
+  render,
+  expect,
+  clearRenderOutput,
+  mockAnimationTimer,
+  mockWindowDimensions,
+  recordAnimationUpdates,
+  unmockAnimationTimer,
+  unmockWindowDimensions,
+  waitForAnimationUpdates,
+} from '../../../ReJest/RuntimeTestsApi';
+import type { ReanimatedKeyframe } from 'react-native-reanimated/lib/typescript/layoutReanimation/animationBuilder/Keyframe';
+import { Snapshots } from './basic.snapshot.test';
+
+const AnimatedComponent = ({ enteringAnimation }: { enteringAnimation: ReanimatedKeyframe }) => {
+  return (
+    <View style={styles.container}>
+      <Animated.View style={styles.box} entering={enteringAnimation} />
+    </View>
+  );
+};
+
+describe('entering with custom animation (withDelay + withTiming color changes) test', () => {
+  const twirlingAnimation = new Keyframe({
+    0: { opacity: 0, transform: [{ translateY: 50 }, { rotate: '820deg' }, { scale: 0 }] },
+    50: {
+      opacity: 0.5,
+      transform: [{ translateY: 25 }, { rotate: '-180deg' }, { scale: 0.5 }],
+      easing: Easing.out(Easing.quad),
+    },
+    100: { opacity: 1, transform: [{ translateY: 0 }, { rotate: '0deg' }, { scale: 1 }] },
+  }).duration(1000);
+
+  const rainbowPulsarAnimation = new Keyframe({
+    0: { transform: [{ scale: 2 }], backgroundColor: 'hsl(0, 100%, 50%)' },
+    15: { transform: [{ scale: 1 }], easing: Easing.poly(1) },
+    30: { transform: [{ scale: 2 }], easing: Easing.poly(2), backgroundColor: '#ffd700ff' },
+    45: { transform: [{ scale: 1 }], easing: Easing.poly(3) },
+    60: { transform: [{ scale: 2 }], backgroundColor: '#00F', easing: Easing.poly(10) },
+    75: { transform: [{ scale: 1 }], easing: Easing.poly(4) },
+    85: { transform: [{ scale: 2 }], backgroundColor: 'rgb(128, 0, 128)', easing: Easing.poly(5) },
+    100: { transform: [{ scale: 1 }], backgroundColor: 'red', easing: Easing.poly(6) },
+  }).duration(1000);
+
+  const rotateAroundCornerAnimation = new Keyframe({
+    0: {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '0deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+    100: {
+      transform: [
+        { translateX: 50 },
+        { translateY: 50 },
+        { rotateZ: '360deg' },
+        { translateX: -50 },
+        { translateY: -50 },
+      ],
+    },
+  }).duration(1000);
+
+  const changeBordersAnimation = new Keyframe({
+    0: {
+      borderRadius: 20,
+      borderWidth: 5,
+      backgroundColor: '#3cb371ff',
+      borderColor: '#2f4f4fff',
+    },
+    25: {
+      borderRadius: 50,
+      borderWidth: 10,
+      borderColor: '#2f4f4fff',
+    },
+    50: {
+      borderRadius: 45,
+      borderWidth: 50,
+      borderColor: '#2f4f4fff',
+      backgroundColor: '#3cb371ff',
+    },
+    51: {
+      borderRadius: 45,
+      borderWidth: 50,
+      borderColor: '#2f4f4fff',
+      backgroundColor: '#ffd700ff',
+    },
+    100: {
+      borderRadius: 5,
+      borderWidth: 0,
+    },
+  }).duration(2000);
+
+  const elasticAnimation = new Keyframe({
+    0: { transform: [{ translateY: 0 }] },
+    100: { transform: [{ translateY: 200 }], easing: Easing.elastic(10) },
+  }).duration(2000);
+
+  const linearAnimation1 = new Keyframe({
+    0: {
+      transform: [{ translateY: 0 }],
+      easing: Easing.elastic(10), // This easing is unused
+    },
+    100: { transform: [{ translateY: 200 }] },
+  }).duration(500);
+
+  const linearAnimation2 = new Keyframe({
+    0: { transform: [{ translateY: 0 }] },
+    100: { transform: [{ translateY: 200 }] },
+  }).duration(500);
+
+  // This is a reproduction of a weird bug happening on new architecture only.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const changeBordersAnimationBugRepro = new Keyframe({
+    0: {
+      borderRadius: 20,
+      borderWidth: 5,
+      backgroundColor: '#3cb371ff',
+      borderColor: '#2f4f4fff',
+    },
+    25: {
+      borderRadius: 50,
+      borderWidth: 10,
+      borderColor: '#2f4f4fff',
+    },
+    50: {
+      borderRadius: 50,
+      borderWidth: 50,
+      backgroundColor: '#3cb371ff',
+    },
+    51: {
+      borderRadius: 45,
+      borderWidth: 50,
+      borderColor: '#2f4f4fff',
+      backgroundColor: '#ffd700ff',
+    },
+    100: {
+      borderRadius: 5,
+      borderWidth: 0,
+    },
+  }).duration(5000);
+
+  test.each([
+    [twirlingAnimation, 'twirling'],
+    [rainbowPulsarAnimation, 'rainbowPulsar'],
+    [rotateAroundCornerAnimation, 'rotateAroundCorner'],
+    [changeBordersAnimation, 'changeBorders'],
+    [elasticAnimation, 'elastic'],
+    [linearAnimation1, 'linear'],
+    [linearAnimation2, 'linear'], // compare with the same snapshot as above
+  ] as Array<[ReanimatedKeyframe, keyof typeof Snapshots]>)(
+    'Test keyframe animation **${1}**',
+    async ([keyframeAnimation, snapshotName]) => {
+      await mockAnimationTimer();
+      await mockWindowDimensions();
+      const updatesContainer = await recordAnimationUpdates();
+
+      await render(<AnimatedComponent enteringAnimation={keyframeAnimation} />);
+
+      await waitForAnimationUpdates(Snapshots[snapshotName].length);
+      const updates = updatesContainer.getUpdates();
+      expect(updates).toMatchSnapshots(Snapshots[snapshotName]);
+
+      await unmockAnimationTimer();
+      await unmockWindowDimensions();
+      await clearRenderOutput();
+    },
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    height: 250,
+    flex: 1,
+    padding: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    backgroundColor: '#b58df1',
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});