fix(animations): do not delay style() values before a stagger() runs

Closes #17412

packages/animations/browser/src/dsl/animation_timeline_builder.ts

@@ -409,11 +409,12 @@ export class AnimationTimelineBuilderVisitor implements AstVisitor {
         break;
     }
 
+    const timeline = context.currentTimeline;
     if (delay) {
-      context.currentTimeline.delayNextStep(delay);
+      timeline.delayNextStep(delay);
     }
 
-    const startingTime = context.currentTimeline.currentTime;
+    const startingTime = timeline.currentTime;
     ast.animation.visit(this, context);
     context.previousNode = ast;
 
@@ -612,10 +613,19 @@ export class TimelineBuilder {
   get currentTime() { return this.startTime + this.duration; }
 
   delayNextStep(delay: number) {
-    if (this.duration == 0) {
-      this.startTime += delay;
-    } else {
+    // in the event that a style() step is placed right before a stagger()
+    // and that style() step is the very first style() value in the animation
+    // then we need to make a copy of the keyframe [0, copy, 1] so that the delay
+    // properly applies the style() values to work with the stagger...
+    const hasPreStyleStep = this._keyframes.size == 1 && Object.keys(this._pendingStyles).length;
+
+    if (this.duration || hasPreStyleStep) {
       this.forwardTime(this.currentTime + delay);
+      if (hasPreStyleStep) {
+        this.snapshotCurrentStyles();
+      }
+    } else {
+      this.startTime += delay;
     }
   }