diff --git a/src/cdk-experimental/dialog/dialog-container.ts b/src/cdk-experimental/dialog/dialog-container.ts
index aa7744418b8b..67443bff9318 100644
--- a/src/cdk-experimental/dialog/dialog-container.ts
+++ b/src/cdk-experimental/dialog/dialog-container.ts
@@ -6,7 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
+import {
+  animate,
+  animateChild,
+  AnimationEvent,
+  group,
+  query,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
 import {FocusTrapFactory, InteractivityChecker} from '@angular/cdk/a11y';
 import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
 import {
@@ -55,8 +65,20 @@ export function throwDialogContentAlreadyAttachedError() {
     trigger('dialog', [
       state('enter', style({opacity: 1})),
       state('exit, void', style({opacity: 0})),
-      transition('* => enter', animate('{{enterAnimationDuration}}')),
-      transition('* => exit, * => void', animate('{{exitAnimationDuration}}')),
+      transition(
+        '* => enter',
+        group([
+          animate('{{enterAnimationDuration}}'),
+          query('@*', animateChild(), {optional: true}),
+        ]),
+      ),
+      transition(
+        '* => exit, * => void',
+        group([
+          animate('{{exitAnimationDuration}}'),
+          query('@*', animateChild(), {optional: true}),
+        ]),
+      ),
     ]),
   ],
   host: {
diff --git a/src/material/bottom-sheet/bottom-sheet-animations.ts b/src/material/bottom-sheet/bottom-sheet-animations.ts
index 7c6abbfd58c1..3931a96ab169 100644
--- a/src/material/bottom-sheet/bottom-sheet-animations.ts
+++ b/src/material/bottom-sheet/bottom-sheet-animations.ts
@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  group,
+  query,
+  animateChild,
 } from '@angular/animations';
 import {AnimationCurves, AnimationDurations} from '@angular/material/core';
 
@@ -25,11 +28,17 @@ export const matBottomSheetAnimations: {
     state('visible', style({transform: 'translateY(0%)'})),
     transition(
       'visible => void, visible => hidden',
-      animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`),
+      group([
+        animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
     transition(
       'void => visible',
-      animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`),
+      group([
+        animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
   ]),
 };
diff --git a/src/material/dialog/dialog-animations.ts b/src/material/dialog/dialog-animations.ts
index 8027a4c5bd51..815c140ef9aa 100644
--- a/src/material/dialog/dialog-animations.ts
+++ b/src/material/dialog/dialog-animations.ts
@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  query,
+  animateChild,
+  group,
 } from '@angular/animations';
 
 /**
@@ -30,11 +33,17 @@ export const matDialogAnimations: {
     state('enter', style({transform: 'none'})),
     transition(
       '* => enter',
-      animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'none', opacity: 1})),
+      group([
+        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'none', opacity: 1})),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
     transition(
       '* => void, * => exit',
-      animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
+      group([
+        animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
   ]),
 };
diff --git a/src/material/sidenav/drawer-animations.ts b/src/material/sidenav/drawer-animations.ts
index a321d515e73f..0cfe5dcb4dc8 100644
--- a/src/material/sidenav/drawer-animations.ts
+++ b/src/material/sidenav/drawer-animations.ts
@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  group,
+  query,
+  animateChild,
 } from '@angular/animations';
 
 /**
@@ -42,10 +45,16 @@ export const matDrawerAnimations: {
         'visibility': 'hidden',
       }),
     ),
-    transition('void => open-instant', animate('0ms')),
+    transition(
+      'void => open-instant',
+      group([animate('0ms'), query('@*', animateChild(), {optional: true})]),
+    ),
     transition(
       'void <=> open, open-instant => void',
-      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'),
+      group([
+        animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
   ]),
 };