fix(animations): ensure starting styles are applied when a delay is present

Closes #9326
Closes #9328

modules/@angular/platform-browser/src/dom/web_animations_driver.ts

@@ -39,9 +39,13 @@ export class WebAnimationsDriver implements AnimationDriver {
       formattedSteps = [start, start];
     }
 
-    var player = this._triggerWebAnimation(
-        anyElm, formattedSteps,
-        {'duration': duration, 'delay': delay, 'easing': easing, 'fill': 'forwards'});
+    var playerOptions = {
+      'duration': duration,
+      'delay': delay,
+      'fill': 'both'  // we use `both` because it allows for styling at 0% to work with `delay`
+    };
+
+    var player = this._triggerWebAnimation(anyElm, formattedSteps, playerOptions);
 
     return new WebAnimationsPlayer(player, duration);
   }

modules/@angular/platform-browser/test/dom/web_animations_driver_spec.ts

@@ -74,5 +74,15 @@ export function main() {
 
       expect(lastKeyframe['height']).toEqual('555em');
     });
+
+    it('should use a fill mode of `both`', () => {
+      var startingStyles = _makeStyles({});
+      var styles = [_makeKeyframe(0, {'color': 'green'}), _makeKeyframe(1, {'color': 'red'})];
+
+      driver.animate(elm, startingStyles, styles, 1000, 1000, 'linear');
+      var details = driver.log.pop();
+      var options = details['options'];
+      expect(options['fill']).toEqual('both');
+    });
   });
 }