diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index 66a37fdef7..27f102eef3 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -420,7 +420,7 @@ export class Menu implements ComponentInterface, MenuI {
     this.lastOnEnd = detail.timeStamp;
     this.animation
       .onFinish(() => this.afterAnimation(shouldOpen), {
-        oneTime: true
+        oneTimeCallback: true
       })
       .progressEnd(shouldComplete, stepValue, realDur);
   }
diff --git a/core/src/utils/animation/animation-interface.ts b/core/src/utils/animation/animation-interface.ts
index aa8c86e531..6407c263b3 100644
--- a/core/src/utils/animation/animation-interface.ts
+++ b/core/src/utils/animation/animation-interface.ts
@@ -64,7 +64,7 @@ export interface AnimationOnFinishCallback {
 }
 
 export interface AnimationOnFinishOptions {
-  oneTime: boolean;
+  oneTimeCallback: boolean;
 }
 
 export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index f3294fdcc1..fbbc4afc71 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -92,7 +92,7 @@ export const createAnimation = () => {
    * upon the animation ending
    */
   const onFinish = (callback: any, opts?: AnimationOnFinishOptions) => {
-    const callbacks = (opts && opts.oneTime) ? onFinishOneTimeCallbacks : onFinishCallbacks;
+    const callbacks = (opts && opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
     callbacks.push({ callback, opts } as AnimationOnFinishCallback);
 
     return ani;
@@ -758,7 +758,7 @@ export const createAnimation = () => {
       animation.progressStart(forceLinearEasing);
     });
 
-    pause(false);
+    pauseAnimation();
     shouldForceLinearEasing = forceLinearEasing;
 
     if (!initialized) {
@@ -783,7 +783,6 @@ export const createAnimation = () => {
     return ani;
   };
 
-  // TODO: Need to clean this up
   const progressEnd = (shouldComplete: boolean, step: number, dur: number | undefined) => {
     childAnimations.forEach(animation => {
       animation.progressEnd(shouldComplete, step, dur);
@@ -820,7 +819,7 @@ export const createAnimation = () => {
       forceDirectionValue = undefined;
       forceDelayValue = undefined;
     }, {
-      oneTime: true
+      oneTimeCallback: true
     });
 
     if (!parentAnimation) {
@@ -830,16 +829,7 @@ export const createAnimation = () => {
     return ani;
   };
 
-  /**
-   * Pause the animation.
-   */
-  const pause = (deep = true) => {
-    if (deep) {
-      childAnimations.forEach(animation => {
-        animation.pause();
-      });
-    }
-
+  const pauseAnimation = () => {
     if (initialized) {
       if (supportsWebAnimations) {
         getWebAnimations().forEach(animation => {
@@ -851,6 +841,17 @@ export const createAnimation = () => {
         });
       }
     }
+  };
+
+  /**
+   * Pause the animation.
+   */
+  const pause = () => {
+    childAnimations.forEach(animation => {
+      animation.pause();
+    });
+
+    pauseAnimation();
 
     return ani;
   };
@@ -862,7 +863,7 @@ export const createAnimation = () => {
    */
   const playAsync = () => {
     return new Promise(resolve => {
-      onFinish(resolve, { oneTime: true });
+      onFinish(resolve, { oneTimeCallback: true });
       play();
 
       return ani;
@@ -877,7 +878,7 @@ export const createAnimation = () => {
   const playSync = () => {
     shouldForceSyncPlayback = true;
 
-    onFinish(() => shouldForceSyncPlayback = false, { oneTime: true });
+    onFinish(() => shouldForceSyncPlayback = false, { oneTimeCallback: true });
     play();
 
     return ani;
@@ -921,11 +922,22 @@ export const createAnimation = () => {
 
        animationEnd(elements[0], () => {
         clearCSSAnimationsTimeout();
+        clearCSSAnimationPlayState();
         animationFinish();
       });
     }
   };
 
+  const clearCSSAnimationPlayState = () => {
+    elements.forEach(element => {
+      requestAnimationFrame(() => {
+        removeStyleProperty(element, 'animation-duration');
+        removeStyleProperty(element, 'animation-delay');
+        removeStyleProperty(element, 'animation-play-state');
+      });
+    });
+  };
+
   const playWebAnimations = () => {
     getWebAnimations().forEach(animation => {
       animation.play();