diff --git a/core/src/utils/animation/animation-interface.ts b/core/src/utils/animation/animation-interface.ts
index 347278ff37..688bc72550 100644
--- a/core/src/utils/animation/animation-interface.ts
+++ b/core/src/utils/animation/animation-interface.ts
@@ -2,7 +2,7 @@ export interface Animation {
   parentAnimation: Animation | undefined;
   elements: HTMLElement[];
   childAnimations: Animation[];
-
+  _name: any;
   animationFinish(): void;
 
   play(): Animation;
diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index 808f032605..f6124938df 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -616,10 +616,8 @@ export const createAnimation = () => {
     beforeAnimation();
 
     numAnimationsRunning = childAnimations.length + 1;
-    
-    if (getKeyframes().length === 0) {
-      animationFinish();
-    } else {
+
+    if (getKeyframes().length > 0) {
       if (supportsWebAnimations) {
         initializeWebAnimation();
       } else {
@@ -631,6 +629,10 @@ export const createAnimation = () => {
   };
 
   const progressStep = (step: number) => {
+    childAnimations.forEach(animation => {
+      animation.progressStep(step);
+    });
+
     step = Math.min(Math.max(step, 0), 1);
 
     if (getDuration() !== undefined) {
@@ -651,10 +653,6 @@ export const createAnimation = () => {
       }
     }
 
-    childAnimations.forEach(animation => {
-      animation.progressStep(step);
-    });
-
     return ani;
   };
 
@@ -698,18 +696,22 @@ export const createAnimation = () => {
   };
 
   const progressStart = (forceLinearEasing = false) => {
-    shouldForceLinearEasing = forceLinearEasing;
-
-    initializeAnimation();
-
     childAnimations.forEach(animation => {
       animation.progressStart(forceLinearEasing);
     });
 
+    shouldForceLinearEasing = forceLinearEasing;
+
+    initializeAnimation();
+
     return ani;
   };
 
   const progressEnd = (shouldComplete: boolean, step: number) => {
+    childAnimations.forEach(animation => {
+      animation.progressEnd(shouldComplete, step);
+    });
+
     shouldForceLinearEasing = false;
     willComplete = shouldComplete;
 
@@ -724,10 +726,6 @@ export const createAnimation = () => {
       play();
     }
 
-    childAnimations.forEach(animation => {
-      animation.progressEnd(shouldComplete, step);
-    });
-
     return ani;
   };
 
@@ -735,6 +733,10 @@ export const createAnimation = () => {
    * Pause the animation.
    */
   const pause = () => {
+    childAnimations.forEach(animation => {
+      animation.pause();
+    });
+
     if (initialized) {
       if (supportsWebAnimations) {
         webAnimations.forEach(animation => {
@@ -747,10 +749,6 @@ export const createAnimation = () => {
       }
     }
 
-    childAnimations.forEach(animation => {
-      animation.pause();
-    });
-
     return ani;
   };
 
@@ -790,6 +788,10 @@ export const createAnimation = () => {
       initializeAnimation();
     }
 
+    childAnimations.forEach(animation => {
+      animation.play();
+    });
+
     if (supportsWebAnimations) {
       webAnimations.forEach(animation => {
         animation.play();
@@ -802,9 +804,9 @@ export const createAnimation = () => {
       });
     }
 
-    childAnimations.forEach(animation => {
-      animation.play();
-    });
+    if (getKeyframes().length === 0 || elements.length === 0) {
+      animationFinish();
+    }
 
     return ani;
   };
@@ -814,15 +816,15 @@ export const createAnimation = () => {
    * all elements to their initial state
    */
   const stop = () => {
+    childAnimations.forEach(animation => {
+      animation.stop();
+    });
+
     if (initialized) {
       cleanUp();
       initialized = false;
     }
 
-    childAnimations.forEach(animation => {
-      animation.stop();
-    });
-
     return ani;
   };
 
@@ -880,7 +882,7 @@ export const createAnimation = () => {
     childAnimations,
 
     animationFinish,
-
+    _name,
     from,
     to,
     fromTo,
diff --git a/core/src/utils/animation/test/multiple/e2e.ts b/core/src/utils/animation/test/multiple/e2e.ts
index b85021064c..dbaee98ce5 100644
--- a/core/src/utils/animation/test/multiple/e2e.ts
+++ b/core/src/utils/animation/test/multiple/e2e.ts
@@ -21,7 +21,7 @@ test(`animation:web: multiple`, async () => {
   await page.waitForSelector('.play');
 
   await waitForFunctionTestContext((payload: any) => {
-    return payload.animationStatus.join(', ') === ['AnimationBFinished', 'AnimationCSubAFinished', 'AnimationCFinished', 'AnimationAFinished', 'AnimationRootFinished'].join(', ');
+    return payload.animationStatus.join(', ') === ['AnimationCSubBFinished', 'AnimationBFinished', 'AnimationCSubAFinished', 'AnimationCFinished', 'AnimationAFinished', 'AnimationRootFinished'].join(', ');
 
   }, { animationStatus });
   screenshotCompares.push(await page.compareScreenshot());
@@ -46,7 +46,7 @@ test(`animation:css: multiple`, async () => {
   await page.waitForSelector('.play');
 
   await waitForFunctionTestContext((payload: any) => {
-    return payload.animationStatus.join(', ') === ['AnimationBFinished', 'AnimationCSubAFinished', 'AnimationCFinished', 'AnimationAFinished', 'AnimationRootFinished'].join(', ');
+    return payload.animationStatus.join(', ') === ['AnimationCSubBFinished', 'AnimationBFinished', 'AnimationCSubAFinished', 'AnimationCFinished', 'AnimationAFinished', 'AnimationRootFinished'].join(', ');
 
   }, { animationStatus });
   screenshotCompares.push(await page.compareScreenshot());
diff --git a/core/src/utils/animation/test/multiple/index.html b/core/src/utils/animation/test/multiple/index.html
index a6f143d944..9936ffcd56 100644
--- a/core/src/utils/animation/test/multiple/index.html
+++ b/core/src/utils/animation/test/multiple/index.html
@@ -18,12 +18,14 @@
     const squareB = document.querySelector('.square-b');
     const squareC = document.querySelector('.square-c');
     const squareCText = document.querySelectorAll('.square-c .text');
+    const squareCSubText = document.querySelectorAll('.square-c .text-sub');
     
     const rootAnimation = createAnimation();
     const animationA = createAnimation();
     const animationB = createAnimation();
     const animationC = createAnimation();
     const animationCSubA = createAnimation();
+    const animationCSubB = createAnimation();
     
     squareA.addEventListener('ionAnimationFinished', (e) => {
       console.log(e.detail);
@@ -105,7 +107,14 @@
         squareA.dispatchEvent(ev);
       });
       
-    animationC.addAnimation(animationCSubA);
+    animationCSubB
+      .addElement(squareCSubText)
+      .onFinish(() => {
+        const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationCSubBFinished' });
+        squareA.dispatchEvent(ev);
+      });
+      
+    animationC.addAnimation([animationCSubA, animationCSubB]);
     
     rootAnimation
       .addAnimation([animationA, animationB, animationC])
@@ -141,6 +150,18 @@
       margin-left: 25px;
       margin-top: 25px;
       margin-bottom: 25px;
+      position: relative;
+    }
+    .circle {
+      width: 10px;
+      height: 10px;
+      border-radius: 10px;
+      background-color: black;
+      position: absolute;
+      margin: 0 auto;
+      top: 10px;
+      left: 0;
+      right: 0;
     }
   </style>
   </head>
@@ -170,6 +191,7 @@
         
         <div class="square square-c">
           <div class="text">Hello</div>
+          <div class="circle"></div>
         </div>
       </div>
     </ion-content>