fix(animations): convert hyphenated properties to camel case when using Web Animations (#20059)

fixes #20058

core/src/utils/animation/animation-utils.ts

@@ -1,3 +1,28 @@
+import { AnimationKeyFrames } from './animation-interface';
+
+/**
+ * Web Animations requires hyphenated CSS properties
+ * to be written in camelCase when animating
+ */
+export const processKeyframes = (keyframes: AnimationKeyFrames) => {
+  keyframes.forEach(keyframe => {
+    for (const key in keyframe) {
+      if (keyframe.hasOwnProperty(key) && key.includes('-')) {
+        const value = keyframe[key];
+        const newKey = convertHyphenToCamelCase(key);
+
+        keyframe[newKey] = value;
+        delete keyframe[key];
+      }
+    }
+  });
+
+  return keyframes;
+};
+
+const convertHyphenToCamelCase = (str: string) => {
+  return str.replace(/-([a-z])/ig, g => g[1].toUpperCase());
+};
 
 export const setStyleProperty = (element: HTMLElement, propertyName: string, value: string | null) => {
   element.style.setProperty(propertyName, value);