diff --git a/packages/animations/browser/src/dsl/animation_ast_builder.ts b/packages/animations/browser/src/dsl/animation_ast_builder.ts
index db15b9ba88..d373ab145c 100644
--- a/packages/animations/browser/src/dsl/animation_ast_builder.ts
+++ b/packages/animations/browser/src/dsl/animation_ast_builder.ts
@@ -73,6 +73,7 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
 
   private _resetContextStyleTimingState(context: AnimationAstBuilderContext) {
     context.currentQuerySelector = ROOT_SELECTOR;
+    context.collectedStyles = {};
     context.collectedStyles[ROOT_SELECTOR] = {};
     context.currentTime = 0;
   }
diff --git a/packages/animations/browser/test/dsl/animation_spec.ts b/packages/animations/browser/test/dsl/animation_spec.ts
index dc40da85a8..d022379e12 100644
--- a/packages/animations/browser/test/dsl/animation_spec.ts
+++ b/packages/animations/browser/test/dsl/animation_spec.ts
@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AUTO_STYLE, AnimationMetadata, AnimationMetadataType, animate, animation, group, keyframes, query, sequence, style, useAnimation, ɵStyleData} from '@angular/animations';
+import {AUTO_STYLE, AnimationMetadata, AnimationMetadataType, animate, animation, group, keyframes, query, sequence, style, transition, trigger, useAnimation, ɵStyleData} from '@angular/animations';
 import {AnimationOptions} from '@angular/core/src/animation/dsl';
 
 import {Animation} from '../../src/dsl/animation';
@@ -102,6 +102,23 @@ export function main() {
                 /The CSS property "opacity" that exists between the times of "0ms" and "2000ms" is also being animated in a parallel animation between the times of "0ms" and "1500ms"/);
       });
 
+      it('should not throw an error if animations overlap in different query levels within different transitions',
+         () => {
+           const steps = trigger('myAnimation', [
+             transition('a => b', group([
+                          query('h1', animate('1s', style({opacity: 0}))),
+                          query('h2', animate('1s', style({opacity: 1}))),
+                        ])),
+
+             transition('b => a', group([
+                          query('h1', animate('1s', style({opacity: 0}))),
+                          query('h2', animate('1s', style({opacity: 1}))),
+                        ])),
+           ]);
+
+           expect(() => validateAndThrowAnimationSequence(steps)).not.toThrow();
+         });
+
       it('should throw an error if an animation time is invalid', () => {
         const steps = [animate('500xs', style({opacity: 1}))];