diff --git a/core/src/utils/animation/animation-utils.ts b/core/src/utils/animation/animation-utils.ts
index 846a567ad4..91b5e394e5 100644
--- a/core/src/utils/animation/animation-utils.ts
+++ b/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);
diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index b2399f04ea..cda63e7d91 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -3,7 +3,7 @@
 import { raf } from '../helpers';
 
 import { Animation, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrame, AnimationKeyFrameEdge, AnimationKeyFrames, AnimationLifecycle, AnimationPlayOptions } from './animation-interface';
-import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeName, generateKeyframeRules, removeStyleProperty, setStyleProperty } from './animation-utils';
+import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeName, generateKeyframeRules, processKeyframes, removeStyleProperty, setStyleProperty } from './animation-utils';
 
 interface AnimationOnFinishCallback {
   c: AnimationLifecycle;
@@ -526,8 +526,10 @@ export const createAnimation = (animationId?: string): Animation => {
   };
 
   const initializeWebAnimation = () => {
+    const processedKeyframes = processKeyframes(_keyframes);
+
     elements.forEach(element => {
-      const animation = element.animate(_keyframes, {
+      const animation = element.animate(processedKeyframes, {
         id,
         delay: getDelay(),
         duration: getDuration(),
diff --git a/core/src/utils/animation/test/basic/index.html b/core/src/utils/animation/test/basic/index.html
index 364fb2ef18..41d30dbce2 100644
--- a/core/src/utils/animation/test/basic/index.html
+++ b/core/src/utils/animation/test/basic/index.html
@@ -29,10 +29,10 @@
       .iterations(2)
       .easing('linear')
       .keyframes([
-        { background: 'rgba(255, 0, 0, 0.5)', offset: 0 },
-        { background: 'rgba(0, 255, 0, 0.5)', offset: 0.33 },
-        { background: 'rgba(0, 0, 255, 0.5)', offset: 0.66 },
-        { background: 'rgba(255, 0, 0, 0.5)', offset: 1 }
+        { background: 'rgba(255, 0, 0, 0.5)', offset: 0, 'border-radius': '0px' },
+        { background: 'rgba(0, 255, 0, 0.5)', offset: 0.33, 'border-radius': '10px' },
+        { background: 'rgba(0, 0, 255, 0.5)', offset: 0.66, 'border-radius': '20px' },
+        { background: 'rgba(255, 0, 0, 0.5)', offset: 1, 'border-radius': '30px' }
       ])
       .onFinish(() => {
         const ev = new CustomEvent('ionAnimationFinished');
diff --git a/core/src/utils/animation/test/gesture/index.html b/core/src/utils/animation/test/gesture/index.html
index a1fafb905a..04a25309a8 100644
--- a/core/src/utils/animation/test/gesture/index.html
+++ b/core/src/utils/animation/test/gesture/index.html
@@ -63,7 +63,7 @@
       }
     });
     
-    gesture.setDisabled(false);
+    gesture.enable(true);
     
     animationA
       .addElement(squareA)