@angular/animations 13.3.0 → 14.0.0-next.10

package/fesm2015/browser.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v13.3.0
+ * @license Angular v14.0.0-next.10
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -142,6 +142,220 @@ function transitionFailed(name, errors) {
         `@${name} has failed due to:\n ${errors.map(err => err.message).join('\n- ')}`);
 }
 
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+/**
+ * Set of all animatable CSS properties
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
+ */
+const ANIMATABLE_PROP_SET = new Set([
+    '-moz-outline-radius',
+    '-moz-outline-radius-bottomleft',
+    '-moz-outline-radius-bottomright',
+    '-moz-outline-radius-topleft',
+    '-moz-outline-radius-topright',
+    '-ms-grid-columns',
+    '-ms-grid-rows',
+    '-webkit-line-clamp',
+    '-webkit-text-fill-color',
+    '-webkit-text-stroke',
+    '-webkit-text-stroke-color',
+    'accent-color',
+    'all',
+    'backdrop-filter',
+    'background',
+    'background-color',
+    'background-position',
+    'background-size',
+    'block-size',
+    'border',
+    'border-block-end',
+    'border-block-end-color',
+    'border-block-end-width',
+    'border-block-start',
+    'border-block-start-color',
+    'border-block-start-width',
+    'border-bottom',
+    'border-bottom-color',
+    'border-bottom-left-radius',
+    'border-bottom-right-radius',
+    'border-bottom-width',
+    'border-color',
+    'border-end-end-radius',
+    'border-end-start-radius',
+    'border-image-outset',
+    'border-image-slice',
+    'border-image-width',
+    'border-inline-end',
+    'border-inline-end-color',
+    'border-inline-end-width',
+    'border-inline-start',
+    'border-inline-start-color',
+    'border-inline-start-width',
+    'border-left',
+    'border-left-color',
+    'border-left-width',
+    'border-radius',
+    'border-right',
+    'border-right-color',
+    'border-right-width',
+    'border-start-end-radius',
+    'border-start-start-radius',
+    'border-top',
+    'border-top-color',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-top-width',
+    'border-width',
+    'bottom',
+    'box-shadow',
+    'caret-color',
+    'clip',
+    'clip-path',
+    'color',
+    'column-count',
+    'column-gap',
+    'column-rule',
+    'column-rule-color',
+    'column-rule-width',
+    'column-width',
+    'columns',
+    'filter',
+    'flex',
+    'flex-basis',
+    'flex-grow',
+    'flex-shrink',
+    'font',
+    'font-size',
+    'font-size-adjust',
+    'font-stretch',
+    'font-variation-settings',
+    'font-weight',
+    'gap',
+    'grid-column-gap',
+    'grid-gap',
+    'grid-row-gap',
+    'grid-template-columns',
+    'grid-template-rows',
+    'height',
+    'inline-size',
+    'input-security',
+    'inset',
+    'inset-block',
+    'inset-block-end',
+    'inset-block-start',
+    'inset-inline',
+    'inset-inline-end',
+    'inset-inline-start',
+    'left',
+    'letter-spacing',
+    'line-clamp',
+    'line-height',
+    'margin',
+    'margin-block-end',
+    'margin-block-start',
+    'margin-bottom',
+    'margin-inline-end',
+    'margin-inline-start',
+    'margin-left',
+    'margin-right',
+    'margin-top',
+    'mask',
+    'mask-border',
+    'mask-position',
+    'mask-size',
+    'max-block-size',
+    'max-height',
+    'max-inline-size',
+    'max-lines',
+    'max-width',
+    'min-block-size',
+    'min-height',
+    'min-inline-size',
+    'min-width',
+    'object-position',
+    'offset',
+    'offset-anchor',
+    'offset-distance',
+    'offset-path',
+    'offset-position',
+    'offset-rotate',
+    'opacity',
+    'order',
+    'outline',
+    'outline-color',
+    'outline-offset',
+    'outline-width',
+    'padding',
+    'padding-block-end',
+    'padding-block-start',
+    'padding-bottom',
+    'padding-inline-end',
+    'padding-inline-start',
+    'padding-left',
+    'padding-right',
+    'padding-top',
+    'perspective',
+    'perspective-origin',
+    'right',
+    'rotate',
+    'row-gap',
+    'scale',
+    'scroll-margin',
+    'scroll-margin-block',
+    'scroll-margin-block-end',
+    'scroll-margin-block-start',
+    'scroll-margin-bottom',
+    'scroll-margin-inline',
+    'scroll-margin-inline-end',
+    'scroll-margin-inline-start',
+    'scroll-margin-left',
+    'scroll-margin-right',
+    'scroll-margin-top',
+    'scroll-padding',
+    'scroll-padding-block',
+    'scroll-padding-block-end',
+    'scroll-padding-block-start',
+    'scroll-padding-bottom',
+    'scroll-padding-inline',
+    'scroll-padding-inline-end',
+    'scroll-padding-inline-start',
+    'scroll-padding-left',
+    'scroll-padding-right',
+    'scroll-padding-top',
+    'scroll-snap-coordinate',
+    'scroll-snap-destination',
+    'scrollbar-color',
+    'shape-image-threshold',
+    'shape-margin',
+    'shape-outside',
+    'tab-size',
+    'text-decoration',
+    'text-decoration-color',
+    'text-decoration-thickness',
+    'text-emphasis',
+    'text-emphasis-color',
+    'text-indent',
+    'text-shadow',
+    'text-underline-offset',
+    'top',
+    'transform',
+    'transform-origin',
+    'translate',
+    'vertical-align',
+    'visibility',
+    'width',
+    'word-spacing',
+    'z-index',
+    'zoom',
+]);
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -170,26 +384,26 @@ function optimizeGroupPlayer(players) {
             return new ɵAnimationGroupPlayer(players);
     }
 }
-function normalizeKeyframes(driver, normalizer, element, keyframes, preStyles = {}, postStyles = {}) {
+function normalizeKeyframes$1(driver, normalizer, element, keyframes, preStyles = new Map(), postStyles = new Map()) {
     const errors = [];
     const normalizedKeyframes = [];
     let previousOffset = -1;
     let previousKeyframe = null;
     keyframes.forEach(kf => {
-        const offset = kf['offset'];
+        const offset = kf.get('offset');
         const isSameOffset = offset == previousOffset;
-        const normalizedKeyframe = (isSameOffset && previousKeyframe) || {};
-        Object.keys(kf).forEach(prop => {
+        const normalizedKeyframe = (isSameOffset && previousKeyframe) || new Map();
+        kf.forEach((val, prop) => {
             let normalizedProp = prop;
-            let normalizedValue = kf[prop];
+            let normalizedValue = val;
             if (prop !== 'offset') {
                 normalizedProp = normalizer.normalizePropertyName(normalizedProp, errors);
                 switch (normalizedValue) {
                     case ɵPRE_STYLE:
-                        normalizedValue = preStyles[prop];
+                        normalizedValue = preStyles.get(prop);
                         break;
                     case AUTO_STYLE:
-                        normalizedValue = postStyles[prop];
+                        normalizedValue = postStyles.get(prop);
                         break;
                     default:
                         normalizedValue =
@@ -197,7 +411,7 @@ function normalizeKeyframes(driver, normalizer, element, keyframes, preStyles =
                         break;
                 }
             }
-            normalizedKeyframe[normalizedProp] = normalizedValue;
+            normalizedKeyframe.set(normalizedProp, normalizedValue);
         });
         if (!isSameOffset) {
             normalizedKeyframes.push(normalizedKeyframe);
@@ -236,26 +450,17 @@ function copyAnimationEvent(e, phaseName, player) {
 function makeAnimationEvent(element, triggerName, fromState, toState, phaseName = '', totalTime = 0, disabled) {
     return { element, triggerName, fromState, toState, phaseName, totalTime, disabled: !!disabled };
 }
-function getOrSetAsInMap(map, key, defaultValue) {
-    let value;
-    if (map instanceof Map) {
-        value = map.get(key);
-        if (!value) {
-            map.set(key, value = defaultValue);
-        }
-    }
-    else {
-        value = map[key];
-        if (!value) {
-            value = map[key] = defaultValue;
-        }
+function getOrSetDefaultValue(map, key, defaultValue) {
+    let value = map.get(key);
+    if (!value) {
+        map.set(key, value = defaultValue);
     }
     return value;
 }
 function parseTimelineCommand(command) {
     const separatorPos = command.indexOf(':');
     const id = command.substring(1, separatorPos);
-    const action = command.substr(separatorPos + 1);
+    const action = command.slice(separatorPos + 1);
     return [id, action];
 }
 let _contains = (elm1, elm2) => false;
@@ -315,12 +520,15 @@ function validateStyleProperty(prop) {
     if (_CACHED_BODY.style && !containsVendorPrefix(prop)) {
         result = prop in _CACHED_BODY.style;
         if (!result && _IS_WEBKIT) {
-            const camelProp = 'Webkit' + prop.charAt(0).toUpperCase() + prop.substr(1);
+            const camelProp = 'Webkit' + prop.charAt(0).toUpperCase() + prop.slice(1);
             result = camelProp in _CACHED_BODY.style;
         }
     }
     return result;
 }
+function validateWebAnimatableStyleProperty(prop) {
+    return ANIMATABLE_PROP_SET.has(prop);
+}
 function getBodyNode() {
     if (typeof document != 'undefined') {
         return document.body;
@@ -329,13 +537,13 @@ function getBodyNode() {
 }
 const containsElement = _contains;
 const invokeQuery = _query;
-function hypenatePropsObject(object) {
-    const newObj = {};
-    Object.keys(object).forEach(prop => {
+function hypenatePropsKeys(original) {
+    const newMap = new Map();
+    original.forEach((val, prop) => {
         const newProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2');
-        newObj[newProp] = object[prop];
+        newMap.set(newProp, val);
     });
-    return newObj;
+    return newMap;
 }
 
 /**
@@ -372,9 +580,9 @@ class NoopAnimationDriver {
         return new NoopAnimationPlayer(duration, delay);
     }
 }
-NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NoopAnimationDriver });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NoopAnimationDriver, decorators: [{
+NoopAnimationDriver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.10", ngImport: i0, type: NoopAnimationDriver, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NoopAnimationDriver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.10", ngImport: i0, type: NoopAnimationDriver });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.10", ngImport: i0, type: NoopAnimationDriver, decorators: [{
             type: Injectable
         }] });
 /**
@@ -468,27 +676,41 @@ function copyObj(obj, destination = {}) {
     });
     return destination;
 }
+function convertToMap(obj) {
+    const styleMap = new Map();
+    Object.keys(obj).forEach(prop => {
+        const val = obj[prop];
+        styleMap.set(prop, val);
+    });
+    return styleMap;
+}
+function normalizeKeyframes(keyframes) {
+    if (!keyframes.length) {
+        return [];
+    }
+    if (keyframes[0] instanceof Map) {
+        return keyframes;
+    }
+    return keyframes.map(kf => convertToMap(kf));
+}
 function normalizeStyles(styles) {
-    const normalizedStyles = {};
+    const normalizedStyles = new Map();
     if (Array.isArray(styles)) {
-        styles.forEach(data => copyStyles(data, false, normalizedStyles));
+        styles.forEach(data => copyStyles(data, normalizedStyles));
     }
     else {
-        copyStyles(styles, false, normalizedStyles);
+        copyStyles(styles, normalizedStyles);
     }
     return normalizedStyles;
 }
-function copyStyles(styles, readPrototype, destination = {}) {
-    if (readPrototype) {
-        // we make use of a for-in loop so that the
-        // prototypically inherited properties are
-        // revealed from the backFill map
-        for (let prop in styles) {
-            destination[prop] = styles[prop];
+function copyStyles(styles, destination = new Map(), backfill) {
+    if (backfill) {
+        for (let [prop, val] of backfill) {
+            destination.set(prop, val);
         }
     }
-    else {
-        copyObj(styles, destination);
+    for (let [prop, val] of styles) {
+        destination.set(prop, val);
     }
     return destination;
 }
@@ -524,12 +746,12 @@ function writeStyleAttribute(element) {
 }
 function setStyles(element, styles, formerStyles) {
     if (element['style']) {
-        Object.keys(styles).forEach(prop => {
+        styles.forEach((val, prop) => {
             const camelProp = dashCaseToCamelCase(prop);
-            if (formerStyles && !formerStyles.hasOwnProperty(prop)) {
-                formerStyles[prop] = element.style[camelProp];
+            if (formerStyles && !formerStyles.has(prop)) {
+                formerStyles.set(prop, element.style[camelProp]);
             }
-            element.style[camelProp] = styles[prop];
+            element.style[camelProp] = val;
         });
         // On the server set the 'style' attribute since it's not automatically reflected.
         if (isNode()) {
@@ -539,7 +761,7 @@ function setStyles(element, styles, formerStyles) {
 }
 function eraseStyles(element, styles) {
     if (element['style']) {
-        Object.keys(styles).forEach(prop => {
+        styles.forEach((_, prop) => {
             const camelProp = dashCaseToCamelCase(prop);
             element.style[camelProp] = '';
         });
@@ -585,7 +807,7 @@ function interpolateParams(value, params, errors) {
     const str = original.replace(PARAM_REGEX, (_, varName) => {
         let localVal = params[varName];
         // this means that the value was never overridden by the data passed in by the user
-        if (!params.hasOwnProperty(varName)) {
+        if (localVal == null) {
             errors.push(invalidParamValue(varName));
             localVal = '';
         }
@@ -614,23 +836,19 @@ function allowPreviousPlayerStylesMerge(duration, delay) {
     return duration === 0 || delay === 0;
 }
 function balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles) {
-    const previousStyleProps = Object.keys(previousStyles);
-    if (previousStyleProps.length && keyframes.length) {
+    if (previousStyles.size && keyframes.length) {
         let startingKeyframe = keyframes[0];
         let missingStyleProps = [];
-        previousStyleProps.forEach(prop => {
-            if (!startingKeyframe.hasOwnProperty(prop)) {
+        previousStyles.forEach((val, prop) => {
+            if (!startingKeyframe.has(prop)) {
                 missingStyleProps.push(prop);
             }
-            startingKeyframe[prop] = previousStyles[prop];
+            startingKeyframe.set(prop, val);
         });
         if (missingStyleProps.length) {
-            // tslint:disable-next-line
-            for (var i = 1; i < keyframes.length; i++) {
+            for (let i = 1; i < keyframes.length; i++) {
                 let kf = keyframes[i];
-                missingStyleProps.forEach(function (prop) {
-                    kf[prop] = computeStyle(element, prop);
-                });
+                missingStyleProps.forEach(prop => kf.set(prop, computeStyle(element, prop)));
             }
         }
     }
@@ -701,7 +919,12 @@ function triggerParsingWarnings(name, warnings) {
 }
 function pushUnrecognizedPropertiesWarning(warnings, props) {
     if (ngDevMode && props.length) {
-        warnings.push(`The provided CSS properties are not recognized properties supported for animations: ${props.join(', ')}`);
+        warnings.push(`The following provided properties are not recognized: ${props.join(', ')}`);
+    }
+}
+function pushNonAnimatablePropertiesWarning(warnings, props) {
+    if (props.length) {
+        warnings.push(`The following provided properties are not animatable: ${props.join(', ')}\n   (see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)`);
     }
 }
 
@@ -843,12 +1066,16 @@ class AnimationAstBuilderVisitor {
         if (context.unsupportedCSSPropertiesFound.size) {
             pushUnrecognizedPropertiesWarning(warnings, [...context.unsupportedCSSPropertiesFound.keys()]);
         }
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
+            context.nonAnimatableCSSPropertiesFound.size) {
+            pushNonAnimatablePropertiesWarning(warnings, [...context.nonAnimatableCSSPropertiesFound.keys()]);
+        }
         return ast;
     }
     _resetContextStyleTimingState(context) {
         context.currentQuerySelector = ROOT_SELECTOR;
-        context.collectedStyles = {};
-        context.collectedStyles[ROOT_SELECTOR] = {};
+        context.collectedStyles = new Map();
+        context.collectedStyles.set(ROOT_SELECTOR, new Map());
         context.currentTime = 0;
     }
     visitTrigger(metadata, context) {
@@ -896,11 +1123,10 @@ class AnimationAstBuilderVisitor {
         if (styleAst.containsDynamicStyles) {
             const missingSubs = new Set();
             const params = astParams || {};
-            styleAst.styles.forEach(value => {
-                if (isObject(value)) {
-                    const stylesObj = value;
-                    Object.keys(stylesObj).forEach(prop => {
-                        extractStyleParams(stylesObj[prop]).forEach(sub => {
+            styleAst.styles.forEach(style => {
+                if (style instanceof Map) {
+                    style.forEach(value => {
+                        extractStyleParams(value).forEach(sub => {
                             if (!params.hasOwnProperty(sub)) {
                                 missingSubs.add(sub);
                             }
@@ -996,37 +1222,30 @@ class AnimationAstBuilderVisitor {
     }
     _makeStyleAst(metadata, context) {
         const styles = [];
-        if (Array.isArray(metadata.styles)) {
-            metadata.styles.forEach(styleTuple => {
-                if (typeof styleTuple == 'string') {
-                    if (styleTuple == AUTO_STYLE) {
-                        styles.push(styleTuple);
-                    }
-                    else {
-                        context.errors.push(invalidStyleValue(styleTuple));
-                    }
+        const metadataStyles = Array.isArray(metadata.styles) ? metadata.styles : [metadata.styles];
+        for (let styleTuple of metadataStyles) {
+            if (typeof styleTuple === 'string') {
+                if (styleTuple === AUTO_STYLE) {
+                    styles.push(styleTuple);
                 }
                 else {
-                    styles.push(styleTuple);
+                    context.errors.push(invalidStyleValue(styleTuple));
                 }
-            });
-        }
-        else {
-            styles.push(metadata.styles);
+            }
+            else {
+                styles.push(convertToMap(styleTuple));
+            }
         }
         let containsDynamicStyles = false;
         let collectedEasing = null;
         styles.forEach(styleData => {
-            if (isObject(styleData)) {
-                const styleMap = styleData;
-                const easing = styleMap['easing'];
-                if (easing) {
-                    collectedEasing = easing;
-                    delete styleMap['easing'];
+            if (styleData instanceof Map) {
+                if (styleData.has('easing')) {
+                    collectedEasing = styleData.get('easing');
+                    styleData.delete('easing');
                 }
                 if (!containsDynamicStyles) {
-                    for (let prop in styleMap) {
-                        const value = styleMap[prop];
+                    for (let value of styleData.values()) {
                         if (value.toString().indexOf(SUBSTITUTION_EXPR_START) >= 0) {
                             containsDynamicStyles = true;
                             break;
@@ -1052,16 +1271,27 @@ class AnimationAstBuilderVisitor {
             startTime -= timings.duration + timings.delay;
         }
         ast.styles.forEach(tuple => {
-            if (typeof tuple == 'string')
+            if (typeof tuple === 'string')
                 return;
-            Object.keys(tuple).forEach(prop => {
+            tuple.forEach((value, prop) => {
                 if (!this._driver.validateStyleProperty(prop)) {
-                    delete tuple[prop];
+                    tuple.delete(prop);
                     context.unsupportedCSSPropertiesFound.add(prop);
                     return;
                 }
-                const collectedStyles = context.collectedStyles[context.currentQuerySelector];
-                const collectedEntry = collectedStyles[prop];
+                if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
+                    this._driver.validateAnimatableStyleProperty) {
+                    if (!this._driver.validateAnimatableStyleProperty(prop)) {
+                        context.nonAnimatableCSSPropertiesFound.add(prop);
+                        // note: non animatable properties are not removed for the tuple just in case they are
+                        //       categorized as non animatable but can actually be animated
+                        return;
+                    }
+                }
+                // This is guaranteed to have a defined Map at this querySelector location making it
+                // safe to add the assertion here. It is set as a default empty map in prior methods.
+                const collectedStyles = context.collectedStyles.get(context.currentQuerySelector);
+                const collectedEntry = collectedStyles.get(prop);
                 let updateCollectedStyle = true;
                 if (collectedEntry) {
                     if (startTime != endTime && startTime >= collectedEntry.startTime &&
@@ -1075,10 +1305,10 @@ class AnimationAstBuilderVisitor {
                     startTime = collectedEntry.startTime;
                 }
                 if (updateCollectedStyle) {
-                    collectedStyles[prop] = { startTime, endTime };
+                    collectedStyles.set(prop, { startTime, endTime });
                 }
                 if (context.options) {
-                    validateStyleParams(tuple[prop], context.options, context.errors);
+                    validateStyleParams(value, context.options, context.errors);
                 }
             });
         });
@@ -1167,7 +1397,7 @@ class AnimationAstBuilderVisitor {
         const [selector, includeSelf] = normalizeSelector(metadata.selector);
         context.currentQuerySelector =
             parentSelector.length ? (parentSelector + ' ' + selector) : selector;
-        getOrSetAsInMap(context.collectedStyles, context.currentQuerySelector, {});
+        getOrSetDefaultValue(context.collectedStyles, context.currentQuerySelector, new Map());
         const animation = visitDslNode(this, normalizeAnimationEntry(metadata.animation), context);
         context.currentQuery = null;
         context.currentQuerySelector = parentSelector;
@@ -1205,7 +1435,7 @@ function normalizeSelector(selector) {
     // Note: the :enter and :leave aren't normalized here since those
     // selectors are filled in at runtime during timeline building
     selector = selector.replace(/@\*/g, NG_TRIGGER_SELECTOR)
-        .replace(/@\w+/g, match => NG_TRIGGER_SELECTOR + '-' + match.substr(1))
+        .replace(/@\w+/g, match => NG_TRIGGER_SELECTOR + '-' + match.slice(1))
         .replace(/:animating/g, NG_ANIMATING_SELECTOR);
     return [selector, hasAmpersand];
 }
@@ -1222,9 +1452,10 @@ class AnimationAstBuilderContext {
         this.currentQuerySelector = null;
         this.currentAnimateTimings = null;
         this.currentTime = 0;
-        this.collectedStyles = {};
+        this.collectedStyles = new Map();
         this.options = null;
         this.unsupportedCSSPropertiesFound = new Set();
+        this.nonAnimatableCSSPropertiesFound = new Set();
     }
 }
 function consumeOffset(styles) {
@@ -1233,23 +1464,20 @@ function consumeOffset(styles) {
     let offset = null;
     if (Array.isArray(styles)) {
         styles.forEach(styleTuple => {
-            if (isObject(styleTuple) && styleTuple.hasOwnProperty('offset')) {
+            if (styleTuple instanceof Map && styleTuple.has('offset')) {
                 const obj = styleTuple;
-                offset = parseFloat(obj['offset']);
-                delete obj['offset'];
+                offset = parseFloat(obj.get('offset'));
+                obj.delete('offset');
             }
         });
     }
-    else if (isObject(styles) && styles.hasOwnProperty('offset')) {
+    else if (styles instanceof Map && styles.has('offset')) {
         const obj = styles;
-        offset = parseFloat(obj['offset']);
-        delete obj['offset'];
+        offset = parseFloat(obj.get('offset'));
+        obj.delete('offset');
     }
     return offset;
 }
-function isObject(value) {
-    return !Array.isArray(value) && typeof value == 'object';
-}
 function constructTimingAst(value, errors) {
     let timings = null;
     if (value.hasOwnProperty('duration')) {
@@ -1357,7 +1585,7 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
  * ```
  *
  * For this operation to cover the combination of animation verbs (style, animate, group, etc...) a
- * combination of prototypical inheritance, AST traversal and merge-sort-like algorithms are used.
+ * combination of AST traversal and merge-sort-like algorithms are used.
  *
  * [AST Traversal]
  * Each of the animation verbs, when executed, will return an string-map object representing what
@@ -1403,23 +1631,18 @@ const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
  * from all previous animation steps. Therefore when a keyframe is created it would also be missing
  * from all previous keyframes up until where it is first used. For the timeline keyframe generation
  * to properly fill in the style it will place the previous value (the value from the parent
- * timeline) or a default value of `*` into the backFill object. Given that each of the keyframe
- * styles is an object that prototypically inherits from the backFill object, this means that if a
- * value is added into the backFill then it will automatically propagate any missing values to all
- * keyframes. Therefore the missing `height` value will be properly filled into the already
- * processed keyframes.
+ * timeline) or a default value of `*` into the backFill map. The `copyStyles` method in util.ts
+ * handles propagating that backfill map to the styles object.
  *
  * When a sub-timeline is created it will have its own backFill property. This is done so that
  * styles present within the sub-timeline do not accidentally seep into the previous/future timeline
  * keyframes
  *
- * (For prototypically-inherited contents to be detected a `for(i in obj)` loop must be used.)
- *
  * [Validation]
  * The code in this file is not responsible for validation. That functionality happens with within
  * the `AnimationValidatorVisitor` code.
  */
-function buildAnimationTimelines(driver, rootElement, ast, enterClassName, leaveClassName, startingStyles = {}, finalStyles = {}, options, subInstructions, errors = []) {
+function buildAnimationTimelines(driver, rootElement, ast, enterClassName, leaveClassName, startingStyles = new Map(), finalStyles = new Map(), options, subInstructions, errors = []) {
     return new AnimationTimelineBuilderVisitor().buildKeyframes(driver, rootElement, ast, enterClassName, leaveClassName, startingStyles, finalStyles, options, subInstructions, errors);
 }
 class AnimationTimelineBuilderVisitor {
@@ -1427,15 +1650,17 @@ class AnimationTimelineBuilderVisitor {
         subInstructions = subInstructions || new ElementInstructionMap();
         const context = new AnimationTimelineContext(driver, rootElement, subInstructions, enterClassName, leaveClassName, errors, []);
         context.options = options;
+        const delay = options.delay ? resolveTimingValue(options.delay) : 0;
+        context.currentTimeline.delayNextStep(delay);
         context.currentTimeline.setStyles([startingStyles], null, context.errors, options);
         visitDslNode(this, ast, context);
         // this checks to see if an actual animation happened
         const timelines = context.timelines.filter(timeline => timeline.containsAnimation());
-        if (Object.keys(finalStyles).length) {
-            // note: we just want to apply the final styles for the rootElement, so we do not
-            //       just apply the styles to the last timeline but the last timeline which
-            //       element is the root one (basically `*`-styles are replaced with the actual
-            //       state style values only for the root element)
+        // note: we just want to apply the final styles for the rootElement, so we do not
+        //       just apply the styles to the last timeline but the last timeline which
+        //       element is the root one (basically `*`-styles are replaced with the actual
+        //       state style values only for the root element)
+        if (timelines.length && finalStyles.size) {
             let lastRootTimeline;
             for (let i = timelines.length - 1; i >= 0; i--) {
                 const timeline = timelines[i];
@@ -1448,8 +1673,9 @@ class AnimationTimelineBuilderVisitor {
                 lastRootTimeline.setStyles([finalStyles], null, context.errors, options);
             }
         }
-        return timelines.length ? timelines.map(timeline => timeline.buildKeyframes()) :
-            [createTimelineInstruction(rootElement, [], [], [], 0, 0, '', false)];
+        return timelines.length ?
+            timelines.map(timeline => timeline.buildKeyframes()) :
+            [createTimelineInstruction(rootElement, [], [], [], 0, delay, '', false)];
     }
     visitTrigger(ast, context) {
         // these values are not visited in this AST
@@ -1585,7 +1811,7 @@ class AnimationTimelineBuilderVisitor {
         const timings = context.currentAnimateTimings;
         // this is a special case for when a style() call
         // directly follows  an animate() call (but not inside of an animate() call)
-        if (!timings && timeline.getCurrentStyleProperties().length) {
+        if (!timings && timeline.hasCurrentStyleProperties()) {
             timeline.forwardFrame();
         }
         const easing = (timings && timings.easing) || ast.easing;
@@ -1626,7 +1852,7 @@ class AnimationTimelineBuilderVisitor {
         const delay = options.delay ? resolveTimingValue(options.delay) : 0;
         if (delay &&
             (context.previousNode.type === 6 /* Style */ ||
-                (startTime == 0 && context.currentTimeline.getCurrentStyleProperties().length))) {
+                (startTime == 0 && context.currentTimeline.hasCurrentStyleProperties()))) {
             context.currentTimeline.snapshotCurrentStyles();
             context.previousNode = DEFAULT_NOOP_PREVIOUS_NODE;
         }
@@ -1820,17 +2046,17 @@ class TimelineBuilder {
         this.startTime = startTime;
         this._elementTimelineStylesLookup = _elementTimelineStylesLookup;
         this.duration = 0;
-        this._previousKeyframe = {};
-        this._currentKeyframe = {};
+        this._previousKeyframe = new Map();
+        this._currentKeyframe = new Map();
         this._keyframes = new Map();
-        this._styleSummary = {};
-        this._pendingStyles = {};
-        this._backFill = {};
+        this._styleSummary = new Map();
+        this._localTimelineStyles = new Map();
+        this._pendingStyles = new Map();
+        this._backFill = new Map();
         this._currentEmptyStepKeyframe = null;
         if (!this._elementTimelineStylesLookup) {
             this._elementTimelineStylesLookup = new Map();
         }
-        this._localTimelineStyles = Object.create(this._backFill, {});
         this._globalTimelineStyles = this._elementTimelineStylesLookup.get(element);
         if (!this._globalTimelineStyles) {
             this._globalTimelineStyles = this._localTimelineStyles;
@@ -1843,13 +2069,13 @@ class TimelineBuilder {
             case 0:
                 return false;
             case 1:
-                return this.getCurrentStyleProperties().length > 0;
+                return this.hasCurrentStyleProperties();
             default:
                 return true;
         }
     }
-    getCurrentStyleProperties() {
-        return Object.keys(this._currentKeyframe);
+    hasCurrentStyleProperties() {
+        return this._currentKeyframe.size > 0;
     }
     get currentTime() {
         return this.startTime + this.duration;
@@ -1859,7 +2085,7 @@ class TimelineBuilder {
         // 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;
+        const hasPreStyleStep = this._keyframes.size === 1 && this._pendingStyles.size;
         if (this.duration || hasPreStyleStep) {
             this.forwardTime(this.currentTime + delay);
             if (hasPreStyleStep) {
@@ -1880,7 +2106,7 @@ class TimelineBuilder {
         }
         this._currentKeyframe = this._keyframes.get(this.duration);
         if (!this._currentKeyframe) {
-            this._currentKeyframe = Object.create(this._backFill, {});
+            this._currentKeyframe = new Map();
             this._keyframes.set(this.duration, this._currentKeyframe);
         }
     }
@@ -1894,16 +2120,16 @@ class TimelineBuilder {
         this._loadKeyframe();
     }
     _updateStyle(prop, value) {
-        this._localTimelineStyles[prop] = value;
-        this._globalTimelineStyles[prop] = value;
-        this._styleSummary[prop] = { time: this.currentTime, value };
+        this._localTimelineStyles.set(prop, value);
+        this._globalTimelineStyles.set(prop, value);
+        this._styleSummary.set(prop, { time: this.currentTime, value });
     }
     allowOnlyTimelineStyles() {
         return this._currentEmptyStepKeyframe !== this._currentKeyframe;
     }
     applyEmptyStep(easing) {
         if (easing) {
-            this._previousKeyframe['easing'] = easing;
+            this._previousKeyframe.set('easing', easing);
         }
         // special case for animate(duration):
         // all missing styles are filled with a `*` value then
@@ -1911,51 +2137,45 @@ class TimelineBuilder {
         // keyframe then they will override the overridden styles
         // We use `_globalTimelineStyles` here because there may be
         // styles in previous keyframes that are not present in this timeline
-        Object.keys(this._globalTimelineStyles).forEach(prop => {
-            this._backFill[prop] = this._globalTimelineStyles[prop] || AUTO_STYLE;
-            this._currentKeyframe[prop] = AUTO_STYLE;
-        });
+        for (let [prop, value] of this._globalTimelineStyles) {
+            this._backFill.set(prop, value || AUTO_STYLE);
+            this._currentKeyframe.set(prop, AUTO_STYLE);
+        }
         this._currentEmptyStepKeyframe = this._currentKeyframe;
     }
     setStyles(input, easing, errors, options) {
         if (easing) {
-            this._previousKeyframe['easing'] = easing;
+            this._previousKeyframe.set('easing', easing);
         }
         const params = (options && options.params) || {};
         const styles = flattenStyles(input, this._globalTimelineStyles);
-        Object.keys(styles).forEach(prop => {
-            const val = interpolateParams(styles[prop], params, errors);
-            this._pendingStyles[prop] = val;
-            if (!this._localTimelineStyles.hasOwnProperty(prop)) {
-                this._backFill[prop] = this._globalTimelineStyles.hasOwnProperty(prop) ?
-                    this._globalTimelineStyles[prop] :
-                    AUTO_STYLE;
+        for (let [prop, value] of styles) {
+            const val = interpolateParams(value, params, errors);
+            this._pendingStyles.set(prop, val);
+            if (!this._localTimelineStyles.has(prop)) {
+                this._backFill.set(prop, this._globalTimelineStyles.get(prop) || AUTO_STYLE);
             }
             this._updateStyle(prop, val);
-        });
+        }
     }
     applyStylesToKeyframe() {
-        const styles = this._pendingStyles;
-        const props = Object.keys(styles);
-        if (props.length == 0)
+        if (this._pendingStyles.size == 0)
             return;
-        this._pendingStyles = {};
-        props.forEach(prop => {
-            const val = styles[prop];
-            this._currentKeyframe[prop] = val;
+        this._pendingStyles.forEach((val, prop) => {
+            this._currentKeyframe.set(prop, val);
         });
-        Object.keys(this._localTimelineStyles).forEach(prop => {
-            if (!this._currentKeyframe.hasOwnProperty(prop)) {
-                this._currentKeyframe[prop] = this._localTimelineStyles[prop];
+        this._pendingStyles.clear();
+        this._localTimelineStyles.forEach((val, prop) => {
+            if (!this._currentKeyframe.has(prop)) {
+                this._currentKeyframe.set(prop, val);
             }
         });
     }
     snapshotCurrentStyles() {
-        Object.keys(this._localTimelineStyles).forEach(prop => {
-            const val = this._localTimelineStyles[prop];
-            this._pendingStyles[prop] = val;
+        for (let [prop, val] of this._localTimelineStyles) {
+            this._pendingStyles.set(prop, val);
             this._updateStyle(prop, val);
-        });
+        }
     }
     getFinalKeyframe() {
         return this._keyframes.get(this.duration);
@@ -1968,9 +2188,8 @@ class TimelineBuilder {
         return properties;
     }
     mergeTimelineCollectedStyles(timeline) {
-        Object.keys(timeline._styleSummary).forEach(prop => {
-            const details0 = this._styleSummary[prop];
-            const details1 = timeline._styleSummary[prop];
+        timeline._styleSummary.forEach((details1, prop) => {
+            const details0 = this._styleSummary.get(prop);
             if (!details0 || details1.time > details0.time) {
                 this._updateStyle(prop, details1.value);
             }
@@ -1983,18 +2202,17 @@ class TimelineBuilder {
         const isEmpty = this._keyframes.size === 1 && this.duration === 0;
         let finalKeyframes = [];
         this._keyframes.forEach((keyframe, time) => {
-            const finalKeyframe = copyStyles(keyframe, true);
-            Object.keys(finalKeyframe).forEach(prop => {
-                const value = finalKeyframe[prop];
-                if (value == ɵPRE_STYLE) {
+            const finalKeyframe = copyStyles(keyframe, new Map(), this._backFill);
+            finalKeyframe.forEach((value, prop) => {
+                if (value === ɵPRE_STYLE) {
                     preStyleProps.add(prop);
                 }
-                else if (value == AUTO_STYLE) {
+                else if (value === AUTO_STYLE) {
                     postStyleProps.add(prop);
                 }
             });
             if (!isEmpty) {
-                finalKeyframe['offset'] = time / this.duration;
+                finalKeyframe.set('offset', time / this.duration);
             }
             finalKeyframes.push(finalKeyframe);
         });
@@ -2003,9 +2221,9 @@ class TimelineBuilder {
         // special case for a 0-second animation (which is designed just to place styles onscreen)
         if (isEmpty) {
             const kf0 = finalKeyframes[0];
-            const kf1 = copyObj(kf0);
-            kf0['offset'] = 0;
-            kf1['offset'] = 1;
+            const kf1 = new Map(kf0);
+            kf0.set('offset', 0);
+            kf1.set('offset', 1);
             finalKeyframes = [kf0, kf1];
         }
         return createTimelineInstruction(this.element, finalKeyframes, preProps, postProps, this.duration, this.startTime, this.easing, false);
@@ -2031,11 +2249,11 @@ class SubTimelineBuilder extends TimelineBuilder {
             const totalTime = duration + delay;
             const startingGap = delay / totalTime;
             // the original starting keyframe now starts once the delay is done
-            const newFirstKeyframe = copyStyles(keyframes[0], false);
-            newFirstKeyframe['offset'] = 0;
+            const newFirstKeyframe = copyStyles(keyframes[0]);
+            newFirstKeyframe.set('offset', 0);
             newKeyframes.push(newFirstKeyframe);
-            const oldFirstKeyframe = copyStyles(keyframes[0], false);
-            oldFirstKeyframe['offset'] = roundOffset(startingGap);
+            const oldFirstKeyframe = copyStyles(keyframes[0]);
+            oldFirstKeyframe.set('offset', roundOffset(startingGap));
             newKeyframes.push(oldFirstKeyframe);
             /*
               When the keyframe is stretched then it means that the delay before the animation
@@ -2054,10 +2272,10 @@ class SubTimelineBuilder extends TimelineBuilder {
             // offsets between 1 ... n -1 are all warped by the keyframe stretch
             const limit = keyframes.length - 1;
             for (let i = 1; i <= limit; i++) {
-                let kf = copyStyles(keyframes[i], false);
-                const oldOffset = kf['offset'];
+                let kf = copyStyles(keyframes[i]);
+                const oldOffset = kf.get('offset');
                 const timeAtKeyframe = delay + oldOffset * duration;
-                kf['offset'] = roundOffset(timeAtKeyframe / totalTime);
+                kf.set('offset', roundOffset(timeAtKeyframe / totalTime));
                 newKeyframes.push(kf);
             }
             // the new starting keyframe should be added at the start
@@ -2074,17 +2292,17 @@ function roundOffset(offset, decimalPoints = 3) {
     return Math.round(offset * mult) / mult;
 }
 function flattenStyles(input, allStyles) {
-    const styles = {};
+    const styles = new Map();
     let allProperties;
     input.forEach(token => {
         if (token === '*') {
-            allProperties = allProperties || Object.keys(allStyles);
-            allProperties.forEach(prop => {
-                styles[prop] = AUTO_STYLE;
-            });
+            allProperties = allProperties || allStyles.keys();
+            for (let prop of allProperties) {
+                styles.set(prop, AUTO_STYLE);
+            }
         }
         else {
-            copyStyles(token, false, styles);
+            copyStyles(token, styles);
         }
     });
     return styles;
@@ -2150,6 +2368,37 @@ class NoopAnimationStyleNormalizer {
  * 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
  */
+const DIMENSIONAL_PROP_SET = new Set([
+    'width',
+    'height',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+    'left',
+    'top',
+    'bottom',
+    'right',
+    'fontSize',
+    'outlineWidth',
+    'outlineOffset',
+    'paddingTop',
+    'paddingLeft',
+    'paddingBottom',
+    'paddingRight',
+    'marginTop',
+    'marginLeft',
+    'marginBottom',
+    'marginRight',
+    'borderRadius',
+    'borderWidth',
+    'borderTopWidth',
+    'borderLeftWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'textIndent',
+    'perspective'
+]);
 class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
     normalizePropertyName(propertyName, errors) {
         return dashCaseToCamelCase(propertyName);
@@ -2157,7 +2406,7 @@ class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
     normalizeStyleValue(userProvidedProperty, normalizedProperty, value, errors) {
         let unit = '';
         const strVal = value.toString().trim();
-        if (DIMENSIONAL_PROP_MAP[normalizedProperty] && value !== 0 && value !== '0') {
+        if (DIMENSIONAL_PROP_SET.has(normalizedProperty) && value !== 0 && value !== '0') {
             if (typeof value === 'number') {
                 unit = 'px';
             }
@@ -2171,14 +2420,14 @@ class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
         return strVal + unit;
     }
 }
-const DIMENSIONAL_PROP_MAP = (() => makeBooleanMap('width,height,minWidth,minHeight,maxWidth,maxHeight,left,top,bottom,right,fontSize,outlineWidth,outlineOffset,paddingTop,paddingLeft,paddingBottom,paddingRight,marginTop,marginLeft,marginBottom,marginRight,borderRadius,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,textIndent,perspective'
-    .split(',')))();
-function makeBooleanMap(keys) {
-    const map = {};
-    keys.forEach(key => map[key] = true);
-    return map;
-}
 
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
 function createTransitionInstruction(element, triggerName, fromState, toState, isRemovalTransition, fromStyles, toStyles, timelines, queriedElements, preStyleProps, postStyleProps, totalTime, errors) {
     return {
         type: 0 /* TransitionAnimation */,
@@ -2209,12 +2458,14 @@ class AnimationTransitionFactory {
         return oneOrMoreTransitionsMatch(this.ast.matchers, currentState, nextState, element, params);
     }
     buildStyles(stateName, params, errors) {
-        const backupStateStyler = this._stateStyles['*'];
-        const stateStyler = this._stateStyles[stateName];
-        const backupStyles = backupStateStyler ? backupStateStyler.buildStyles(params, errors) : {};
-        return stateStyler ? stateStyler.buildStyles(params, errors) : backupStyles;
+        let styler = this._stateStyles.get('*');
+        if (stateName !== undefined) {
+            styler = this._stateStyles.get(stateName === null || stateName === void 0 ? void 0 : stateName.toString()) || styler;
+        }
+        return styler ? styler.buildStyles(params, errors) : new Map();
     }
     build(driver, element, currentState, nextState, enterClassName, leaveClassName, currentOptions, nextOptions, subInstructions, skipAstBuild) {
+        var _a;
         const errors = [];
         const transitionAnimationParams = this.ast.options && this.ast.options.params || EMPTY_OBJECT;
         const currentAnimationParams = currentOptions && currentOptions.params || EMPTY_OBJECT;
@@ -2225,7 +2476,10 @@ class AnimationTransitionFactory {
         const preStyleMap = new Map();
         const postStyleMap = new Map();
         const isRemoval = nextState === 'void';
-        const animationOptions = { params: Object.assign(Object.assign({}, transitionAnimationParams), nextAnimationParams) };
+        const animationOptions = {
+            params: applyParamDefaults(nextAnimationParams, transitionAnimationParams),
+            delay: (_a = this.ast.options) === null || _a === void 0 ? void 0 : _a.delay,
+        };
         const timelines = skipAstBuild ?
             [] :
             buildAnimationTimelines(driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles, nextStateStyles, animationOptions, subInstructions, errors);
@@ -2238,10 +2492,10 @@ class AnimationTransitionFactory {
         }
         timelines.forEach(tl => {
             const elm = tl.element;
-            const preProps = getOrSetAsInMap(preStyleMap, elm, {});
-            tl.preStyleProps.forEach(prop => preProps[prop] = true);
-            const postProps = getOrSetAsInMap(postStyleMap, elm, {});
-            tl.postStyleProps.forEach(prop => postProps[prop] = true);
+            const preProps = getOrSetDefaultValue(preStyleMap, elm, new Set());
+            tl.preStyleProps.forEach(prop => preProps.add(prop));
+            const postProps = getOrSetDefaultValue(postStyleMap, elm, new Set());
+            tl.postStyleProps.forEach(prop => postProps.add(prop));
             if (elm !== element) {
                 queriedElements.add(elm);
             }
@@ -2253,6 +2507,15 @@ class AnimationTransitionFactory {
 function oneOrMoreTransitionsMatch(matchFns, currentState, nextState, element, params) {
     return matchFns.some(fn => fn(currentState, nextState, element, params));
 }
+function applyParamDefaults(userParams, defaults) {
+    const result = copyObj(defaults);
+    for (const key in userParams) {
+        if (userParams.hasOwnProperty(key) && userParams[key] != null) {
+            result[key] = userParams[key];
+        }
+    }
+    return result;
+}
 class AnimationStateStyles {
     constructor(styles, defaultParams, normalizer) {
         this.styles = styles;
@@ -2260,25 +2523,23 @@ class AnimationStateStyles {
         this.normalizer = normalizer;
     }
     buildStyles(params, errors) {
-        const finalStyles = {};
+        const finalStyles = new Map();
         const combinedParams = copyObj(this.defaultParams);
         Object.keys(params).forEach(key => {
             const value = params[key];
-            if (value != null) {
+            if (value !== null) {
                 combinedParams[key] = value;
             }
         });
         this.styles.styles.forEach(value => {
             if (typeof value !== 'string') {
-                const styleObj = value;
-                Object.keys(styleObj).forEach(prop => {
-                    let val = styleObj[prop];
-                    if (val.length > 1) {
+                value.forEach((val, prop) => {
+                    if (val) {
                         val = interpolateParams(val, combinedParams, errors);
                     }
                     const normalizedProp = this.normalizer.normalizePropertyName(prop, errors);
                     val = this.normalizer.normalizeStyleValue(prop, normalizedProp, val, errors);
-                    finalStyles[normalizedProp] = val;
+                    finalStyles.set(normalizedProp, val);
                 });
             }
         });
@@ -2295,10 +2556,10 @@ class AnimationTrigger {
         this.ast = ast;
         this._normalizer = _normalizer;
         this.transitionFactories = [];
-        this.states = {};
+        this.states = new Map();
         ast.states.forEach(ast => {
             const defaultParams = (ast.options && ast.options.params) || {};
-            this.states[ast.name] = new AnimationStateStyles(ast.style, defaultParams, _normalizer);
+            this.states.set(ast.name, new AnimationStateStyles(ast.style, defaultParams, _normalizer));
         });
         balanceProperties(this.states, 'true', '1');
         balanceProperties(this.states, 'false', '0');
@@ -2331,14 +2592,14 @@ function createFallbackTransition(triggerName, states, normalizer) {
     };
     return new AnimationTransitionFactory(triggerName, transition, states);
 }
-function balanceProperties(obj, key1, key2) {
-    if (obj.hasOwnProperty(key1)) {
-        if (!obj.hasOwnProperty(key2)) {
-            obj[key2] = obj[key1];
+function balanceProperties(stateMap, key1, key2) {
+    if (stateMap.has(key1)) {
+        if (!stateMap.has(key2)) {
+            stateMap.set(key2, stateMap.get(key1));
         }
     }
-    else if (obj.hasOwnProperty(key2)) {
-        obj[key1] = obj[key2];
+    else if (stateMap.has(key2)) {
+        stateMap.set(key1, stateMap.get(key2));
     }
 }
 
@@ -2355,8 +2616,8 @@ class TimelineAnimationEngine {
         this.bodyNode = bodyNode;
         this._driver = _driver;
         this._normalizer = _normalizer;
-        this._animations = {};
-        this._playersById = {};
+        this._animations = new Map();
+        this._playersById = new Map();
         this.players = [];
     }
     register(id, metadata) {
@@ -2370,24 +2631,24 @@ class TimelineAnimationEngine {
             if (warnings.length) {
                 warnRegister(warnings);
             }
-            this._animations[id] = ast;
+            this._animations.set(id, ast);
         }
     }
     _buildPlayer(i, preStyles, postStyles) {
         const element = i.element;
-        const keyframes = normalizeKeyframes(this._driver, this._normalizer, element, i.keyframes, preStyles, postStyles);
+        const keyframes = normalizeKeyframes$1(this._driver, this._normalizer, element, i.keyframes, preStyles, postStyles);
         return this._driver.animate(element, keyframes, i.duration, i.delay, i.easing, [], true);
     }
     create(id, element, options = {}) {
         const errors = [];
-        const ast = this._animations[id];
+        const ast = this._animations.get(id);
         let instructions;
         const autoStylesMap = new Map();
         if (ast) {
-            instructions = buildAnimationTimelines(this._driver, element, ast, ENTER_CLASSNAME, LEAVE_CLASSNAME, {}, {}, options, EMPTY_INSTRUCTION_MAP, errors);
+            instructions = buildAnimationTimelines(this._driver, element, ast, ENTER_CLASSNAME, LEAVE_CLASSNAME, new Map(), new Map(), options, EMPTY_INSTRUCTION_MAP, errors);
             instructions.forEach(inst => {
-                const styles = getOrSetAsInMap(autoStylesMap, inst.element, {});
-                inst.postStyleProps.forEach(prop => styles[prop] = null);
+                const styles = getOrSetDefaultValue(autoStylesMap, inst.element, new Map());
+                inst.postStyleProps.forEach(prop => styles.set(prop, null));
             });
         }
         else {
@@ -2398,16 +2659,16 @@ class TimelineAnimationEngine {
             throw createAnimationFailed(errors);
         }
         autoStylesMap.forEach((styles, element) => {
-            Object.keys(styles).forEach(prop => {
-                styles[prop] = this._driver.computeStyle(element, prop, AUTO_STYLE);
+            styles.forEach((_, prop) => {
+                styles.set(prop, this._driver.computeStyle(element, prop, AUTO_STYLE));
             });
         });
         const players = instructions.map(i => {
             const styles = autoStylesMap.get(i.element);
-            return this._buildPlayer(i, {}, styles);
+            return this._buildPlayer(i, new Map(), styles);
         });
         const player = optimizeGroupPlayer(players);
-        this._playersById[id] = player;
+        this._playersById.set(id, player);
         player.onDestroy(() => this.destroy(id));
         this.players.push(player);
         return player;
@@ -2415,14 +2676,14 @@ class TimelineAnimationEngine {
     destroy(id) {
         const player = this._getPlayer(id);
         player.destroy();
-        delete this._playersById[id];
+        this._playersById.delete(id);
         const index = this.players.indexOf(player);
         if (index >= 0) {
             this.players.splice(index, 1);
         }
     }
     _getPlayer(id) {
-        const player = this._playersById[id];
+        const player = this._playersById.get(id);
         if (!player) {
             throw missingPlayer(id);
         }
@@ -2544,14 +2805,14 @@ class AnimationTransitionNamespace {
         this.hostElement = hostElement;
         this._engine = _engine;
         this.players = [];
-        this._triggers = {};
+        this._triggers = new Map();
         this._queue = [];
         this._elementListeners = new Map();
         this._hostClassName = 'ng-tns-' + id;
         addClass(hostElement, this._hostClassName);
     }
     listen(element, name, phase, callback) {
-        if (!this._triggers.hasOwnProperty(name)) {
+        if (!this._triggers.has(name)) {
             throw missingTrigger(phase, name);
         }
         if (phase == null || phase.length == 0) {
@@ -2560,14 +2821,14 @@ class AnimationTransitionNamespace {
         if (!isTriggerEventValid(phase)) {
             throw unsupportedTriggerEvent(phase, name);
         }
-        const listeners = getOrSetAsInMap(this._elementListeners, element, []);
+        const listeners = getOrSetDefaultValue(this._elementListeners, element, []);
         const data = { name, phase, callback };
         listeners.push(data);
-        const triggersWithStates = getOrSetAsInMap(this._engine.statesByElement, element, {});
-        if (!triggersWithStates.hasOwnProperty(name)) {
+        const triggersWithStates = getOrSetDefaultValue(this._engine.statesByElement, element, new Map());
+        if (!triggersWithStates.has(name)) {
             addClass(element, NG_TRIGGER_CLASSNAME);
             addClass(element, NG_TRIGGER_CLASSNAME + '-' + name);
-            triggersWithStates[name] = DEFAULT_STATE_VALUE;
+            triggersWithStates.set(name, DEFAULT_STATE_VALUE);
         }
         return () => {
             // the event listener is removed AFTER the flush has occurred such
@@ -2578,24 +2839,24 @@ class AnimationTransitionNamespace {
                 if (index >= 0) {
                     listeners.splice(index, 1);
                 }
-                if (!this._triggers[name]) {
-                    delete triggersWithStates[name];
+                if (!this._triggers.has(name)) {
+                    triggersWithStates.delete(name);
                 }
             });
         };
     }
     register(name, ast) {
-        if (this._triggers[name]) {
+        if (this._triggers.has(name)) {
             // throw
             return false;
         }
         else {
-            this._triggers[name] = ast;
+            this._triggers.set(name, ast);
             return true;
         }
     }
     _getTrigger(name) {
-        const trigger = this._triggers[name];
+        const trigger = this._triggers.get(name);
         if (!trigger) {
             throw unregisteredTrigger(name);
         }
@@ -2608,15 +2869,15 @@ class AnimationTransitionNamespace {
         if (!triggersWithStates) {
             addClass(element, NG_TRIGGER_CLASSNAME);
             addClass(element, NG_TRIGGER_CLASSNAME + '-' + triggerName);
-            this._engine.statesByElement.set(element, triggersWithStates = {});
+            this._engine.statesByElement.set(element, triggersWithStates = new Map());
         }
-        let fromState = triggersWithStates[triggerName];
+        let fromState = triggersWithStates.get(triggerName);
         const toState = new StateValue(value, this.id);
         const isObj = value && value.hasOwnProperty('value');
         if (!isObj && fromState) {
             toState.absorbOptions(fromState.options);
         }
-        triggersWithStates[triggerName] = toState;
+        triggersWithStates.set(triggerName, toState);
         if (!fromState) {
             fromState = DEFAULT_STATE_VALUE;
         }
@@ -2646,7 +2907,7 @@ class AnimationTransitionNamespace {
             }
             return;
         }
-        const playersOnElement = getOrSetAsInMap(this._engine.playersByElement, element, []);
+        const playersOnElement = getOrSetDefaultValue(this._engine.playersByElement, element, []);
         playersOnElement.forEach(player => {
             // only remove the player if it is queued on the EXACT same trigger/namespace
             // we only also deal with queued players here because if the animation has
@@ -2690,10 +2951,8 @@ class AnimationTransitionNamespace {
         return player;
     }
     deregister(name) {
-        delete this._triggers[name];
-        this._engine.statesByElement.forEach((stateMap, element) => {
-            delete stateMap[name];
-        });
+        this._triggers.delete(name);
+        this._engine.statesByElement.forEach(stateMap => stateMap.delete(name));
         this._elementListeners.forEach((listeners, element) => {
             this._elementListeners.set(element, listeners.filter(entry => {
                 return entry.name != name;
@@ -2736,11 +2995,11 @@ class AnimationTransitionNamespace {
         const previousTriggersValues = new Map();
         if (triggerStates) {
             const players = [];
-            Object.keys(triggerStates).forEach(triggerName => {
-                previousTriggersValues.set(triggerName, triggerStates[triggerName].value);
+            triggerStates.forEach((state, triggerName) => {
+                previousTriggersValues.set(triggerName, state.value);
                 // this check is here in the event that an element is removed
                 // twice (both on the host level and the component level)
-                if (this._triggers[triggerName]) {
+                if (this._triggers.has(triggerName)) {
                     const player = this.trigger(element, triggerName, VOID_VALUE, defaultToFallback);
                     if (player) {
                         players.push(player);
@@ -2769,9 +3028,9 @@ class AnimationTransitionNamespace {
                 if (visitedTriggers.has(triggerName))
                     return;
                 visitedTriggers.add(triggerName);
-                const trigger = this._triggers[triggerName];
+                const trigger = this._triggers.get(triggerName);
                 const transition = trigger.fallbackTransition;
-                const fromState = elementStates[triggerName] || DEFAULT_STATE_VALUE;
+                const fromState = elementStates.get(triggerName) || DEFAULT_STATE_VALUE;
                 const toState = new StateValue(VOID_VALUE);
                 const player = new TransitionAnimationPlayer(this.id, triggerName, element);
                 this._engine.totalQueuedPlayers++;
@@ -2958,35 +3217,20 @@ class TransitionAnimationEngine {
         const limit = namespaceList.length - 1;
         if (limit >= 0) {
             let found = false;
-            if (this.driver.getParentElement !== undefined) {
-                // Fast path for when the driver implements `getParentElement`, which allows us to find the
-                // closest ancestor with an existing namespace that we can then insert `ns` after, without
-                // having to inspect all existing namespaces.
-                let ancestor = this.driver.getParentElement(hostElement);
-                while (ancestor) {
-                    const ancestorNs = namespacesByHostElement.get(ancestor);
-                    if (ancestorNs) {
-                        // An animation namespace has been registered for this ancestor, so we insert `ns`
-                        // right after it to establish top-down ordering of animation namespaces.
-                        const index = namespaceList.indexOf(ancestorNs);
-                        namespaceList.splice(index + 1, 0, ns);
-                        found = true;
-                        break;
-                    }
-                    ancestor = this.driver.getParentElement(ancestor);
-                }
-            }
-            else {
-                // Slow path for backwards compatibility if the driver does not implement
-                // `getParentElement`, to be removed once `getParentElement` is a required method.
-                for (let i = limit; i >= 0; i--) {
-                    const nextNamespace = namespaceList[i];
-                    if (this.driver.containsElement(nextNamespace.hostElement, hostElement)) {
-                        namespaceList.splice(i + 1, 0, ns);
-                        found = true;
-                        break;
-                    }
+            // Find the closest ancestor with an existing namespace so we can then insert `ns` after it,
+            // establishing a top-down ordering of namespaces in `this._namespaceList`.
+            let ancestor = this.driver.getParentElement(hostElement);
+            while (ancestor) {
+                const ancestorNs = namespacesByHostElement.get(ancestor);
+                if (ancestorNs) {
+                    // An animation namespace has been registered for this ancestor, so we insert `ns`
+                    // right after it to establish top-down ordering of animation namespaces.
+                    const index = namespaceList.indexOf(ancestorNs);
+                    namespaceList.splice(index + 1, 0, ns);
+                    found = true;
+                    break;
                 }
+                ancestor = this.driver.getParentElement(ancestor);
             }
             if (!found) {
                 // No namespace exists that is an ancestor of `ns`, so `ns` is inserted at the front to
@@ -3040,11 +3284,9 @@ class TransitionAnimationEngine {
         const namespaces = new Set();
         const elementStates = this.statesByElement.get(element);
         if (elementStates) {
-            const keys = Object.keys(elementStates);
-            for (let i = 0; i < keys.length; i++) {
-                const nsId = elementStates[keys[i]].namespaceId;
-                if (nsId) {
-                    const ns = this._fetchNamespace(nsId);
+            for (let stateValue of elementStates.values()) {
+                if (stateValue.namespaceId) {
+                    const ns = this._fetchNamespace(stateValue.namespaceId);
                     if (ns) {
                         namespaces.add(ns);
                     }
@@ -3352,8 +3594,10 @@ class TransitionAnimationEngine {
                             // we need to restore the previous trigger value since the element has
                             // only been moved and hasn't actually left the DOM
                             const triggersWithStates = this.statesByElement.get(entry.element);
-                            if (triggersWithStates && triggersWithStates[entry.triggerName]) {
-                                triggersWithStates[entry.triggerName].value = previousValue;
+                            if (triggersWithStates && triggersWithStates.has(entry.triggerName)) {
+                                const state = triggersWithStates.get(entry.triggerName);
+                                state.value = previousValue;
+                                triggersWithStates.set(entry.triggerName, state);
                             }
                         }
                         player.destroy();
@@ -3403,24 +3647,22 @@ class TransitionAnimationEngine {
                 subTimelines.append(element, instruction.timelines);
                 const tuple = { instruction, player, element };
                 queuedInstructions.push(tuple);
-                instruction.queriedElements.forEach(element => getOrSetAsInMap(queriedElements, element, []).push(player));
+                instruction.queriedElements.forEach(element => getOrSetDefaultValue(queriedElements, element, []).push(player));
                 instruction.preStyleProps.forEach((stringMap, element) => {
-                    const props = Object.keys(stringMap);
-                    if (props.length) {
+                    if (stringMap.size) {
                         let setVal = allPreStyleElements.get(element);
                         if (!setVal) {
                             allPreStyleElements.set(element, setVal = new Set());
                         }
-                        props.forEach(prop => setVal.add(prop));
+                        stringMap.forEach((_, prop) => setVal.add(prop));
                     }
                 });
                 instruction.postStyleProps.forEach((stringMap, element) => {
-                    const props = Object.keys(stringMap);
                     let setVal = allPostStyleElements.get(element);
                     if (!setVal) {
                         allPostStyleElements.set(element, setVal = new Set());
                     }
-                    props.forEach(prop => setVal.add(prop));
+                    stringMap.forEach((_, prop) => setVal.add(prop));
                 });
             });
         }
@@ -3449,7 +3691,7 @@ class TransitionAnimationEngine {
             const element = player.element;
             const previousPlayers = this._getPreviousPlayers(element, false, player.namespaceId, player.triggerName, null);
             previousPlayers.forEach(prevPlayer => {
-                getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer);
+                getOrSetDefaultValue(allPreviousPlayersMap, element, []).push(prevPlayer);
                 prevPlayer.destroy();
             });
         });
@@ -3477,9 +3719,10 @@ class TransitionAnimationEngine {
             cloakAndComputeStyles(preStylesMap, this.driver, new Set(nodes), allPreStyleElements, ɵPRE_STYLE);
         });
         replaceNodes.forEach(node => {
+            var _a, _b;
             const post = postStylesMap.get(node);
             const pre = preStylesMap.get(node);
-            postStylesMap.set(node, Object.assign(Object.assign({}, post), pre));
+            postStylesMap.set(node, new Map([...Array.from((_a = post === null || post === void 0 ? void 0 : post.entries()) !== null && _a !== void 0 ? _a : []), ...Array.from((_b = pre === null || pre === void 0 ? void 0 : pre.entries()) !== null && _b !== void 0 ? _b : [])]));
         });
         const rootPlayers = [];
         const subPlayers = [];
@@ -3673,7 +3916,7 @@ class TransitionAnimationEngine {
         for (const timelineInstruction of instruction.timelines) {
             const element = timelineInstruction.element;
             const isQueriedElement = element !== rootElement;
-            const players = getOrSetAsInMap(allPreviousPlayersMap, element, []);
+            const players = getOrSetDefaultValue(allPreviousPlayersMap, element, []);
             const previousPlayers = this._getPreviousPlayers(element, isQueriedElement, targetNameSpaceId, targetTriggerName, instruction.toState);
             previousPlayers.forEach(player => {
                 const realPlayer = player.getRealPlayer();
@@ -3716,7 +3959,7 @@ class TransitionAnimationEngine {
             });
             const preStyles = preStylesMap.get(element);
             const postStyles = postStylesMap.get(element);
-            const keyframes = normalizeKeyframes(this.driver, this._normalizer, element, timelineInstruction.keyframes, preStyles, postStyles);
+            const keyframes = normalizeKeyframes$1(this.driver, this._normalizer, element, timelineInstruction.keyframes, preStyles, postStyles);
             const player = this._buildPlayer(timelineInstruction, keyframes, previousPlayers);
             // this means that this particular player belongs to a sub trigger. It is
             // important that we match this player up with the corresponding (@trigger.listener)
@@ -3731,7 +3974,7 @@ class TransitionAnimationEngine {
             return player;
         });
         allQueriedPlayers.forEach(player => {
-            getOrSetAsInMap(this.playersByQueriedElement, player.element, []).push(player);
+            getOrSetDefaultValue(this.playersByQueriedElement, player.element, []).push(player);
             player.onDone(() => deleteOrUnsetInMap(this.playersByQueriedElement, player.element, player));
         });
         allConsumedElements.forEach(element => addClass(element, NG_ANIMATING_CLASSNAME));
@@ -3743,7 +3986,7 @@ class TransitionAnimationEngine {
         // this basically makes all of the callbacks for sub element animations
         // be dependent on the upper players for when they finish
         allSubElements.forEach(element => {
-            getOrSetAsInMap(skippedPlayersMap, element, []).push(player);
+            getOrSetDefaultValue(skippedPlayersMap, element, []).push(player);
         });
         return player;
     }
@@ -3763,7 +4006,7 @@ class TransitionAnimationPlayer {
         this.element = element;
         this._player = new NoopAnimationPlayer();
         this._containsRealPlayer = false;
-        this._queuedCallbacks = {};
+        this._queuedCallbacks = new Map();
         this.destroyed = false;
         this.markedForDestroy = false;
         this.disabled = false;
@@ -3774,10 +4017,10 @@ class TransitionAnimationPlayer {
         if (this._containsRealPlayer)
             return;
         this._player = player;
-        Object.keys(this._queuedCallbacks).forEach(phase => {
-            this._queuedCallbacks[phase].forEach(callback => listenOnPlayer(player, phase, undefined, callback));
+        this._queuedCallbacks.forEach((callbacks, phase) => {
+            callbacks.forEach(callback => listenOnPlayer(player, phase, undefined, callback));
         });
-        this._queuedCallbacks = {};
+        this._queuedCallbacks.clear();
         this._containsRealPlayer = true;
         this.overrideTotalTime(player.totalTime);
         this.queued = false;
@@ -3797,7 +4040,7 @@ class TransitionAnimationPlayer {
         player.onDestroy(() => this.destroy());
     }
     _queueEvent(name, callback) {
-        getOrSetAsInMap(this._queuedCallbacks, name, []).push(callback);
+        getOrSetDefaultValue(this._queuedCallbacks, name, []).push(callback);
     }
     onDone(fn) {
         if (this.queued) {
@@ -3859,29 +4102,14 @@ class TransitionAnimationPlayer {
     }
 }
 function deleteOrUnsetInMap(map, key, value) {
-    let currentValues;
-    if (map instanceof Map) {
-        currentValues = map.get(key);
-        if (currentValues) {
-            if (currentValues.length) {
-                const index = currentValues.indexOf(value);
-                currentValues.splice(index, 1);
-            }
-            if (currentValues.length == 0) {
-                map.delete(key);
-            }
+    let currentValues = map.get(key);
+    if (currentValues) {
+        if (currentValues.length) {
+            const index = currentValues.indexOf(value);
+            currentValues.splice(index, 1);
         }
-    }
-    else {
-        currentValues = map[key];
-        if (currentValues) {
-            if (currentValues.length) {
-                const index = currentValues.indexOf(value);
-                currentValues.splice(index, 1);
-            }
-            if (currentValues.length == 0) {
-                delete map[key];
-            }
+        if (currentValues.length == 0) {
+            map.delete(key);
         }
     }
     return currentValues;
@@ -3908,9 +4136,10 @@ function cloakAndComputeStyles(valuesMap, driver, elements, elementPropsMap, def
     elements.forEach(element => cloakVals.push(cloakElement(element)));
     const failedElements = [];
     elementPropsMap.forEach((props, element) => {
-        const styles = {};
+        const styles = new Map();
         props.forEach(prop => {
-            const value = styles[prop] = driver.computeStyle(element, prop, defaultStyle);
+            const value = driver.computeStyle(element, prop, defaultStyle);
+            styles.set(prop, value);
             // there is no easy way to detect this because a sub element could be removed
             // by a parent animation element being detached.
             if (!value || value.length == 0) {
@@ -4100,13 +4329,6 @@ class AnimationEngine {
     }
 }
 
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * 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
- */
 /**
  * Returns an instance of `SpecialCasedStyles` if and when any special (non animateable) styles are
  * detected.
@@ -4127,7 +4349,7 @@ function packageNonAnimatableStyles(element, styles) {
             endStyles = filterNonAnimatableStyles(styles[styles.length - 1]);
         }
     }
-    else if (styles) {
+    else if (styles instanceof Map) {
         startStyles = filterNonAnimatableStyles(styles);
     }
     return (startStyles || endStyles) ? new SpecialCasedStyles(element, startStyles, endStyles) :
@@ -4149,7 +4371,7 @@ class SpecialCasedStyles {
         this._state = 0 /* Pending */;
         let initialStyles = SpecialCasedStyles.initialStylesByElement.get(_element);
         if (!initialStyles) {
-            SpecialCasedStyles.initialStylesByElement.set(_element, initialStyles = {});
+            SpecialCasedStyles.initialStylesByElement.set(_element, initialStyles = new Map());
         }
         this._initialStyles = initialStyles;
     }
@@ -4192,14 +4414,12 @@ class SpecialCasedStyles {
 SpecialCasedStyles.initialStylesByElement = ( /* @__PURE__ */new WeakMap());
 function filterNonAnimatableStyles(styles) {
     let result = null;
-    const props = Object.keys(styles);
-    for (let i = 0; i < props.length; i++) {
-        const prop = props[i];
+    styles.forEach((val, prop) => {
         if (isNonAnimatableStyle(prop)) {
-            result = result || {};
-            result[prop] = styles[prop];
+            result = result || new Map();
+            result.set(prop, val);
         }
-    }
+    });
     return result;
 }
 function isNonAnimatableStyle(prop) {
@@ -4221,7 +4441,7 @@ class WebAnimationsPlayer {
         this._destroyed = false;
         this.time = 0;
         this.parentPlayer = null;
-        this.currentSnapshot = {};
+        this.currentSnapshot = new Map();
         this._duration = options['duration'];
         this._delay = options['delay'] || 0;
         this.time = this._duration + this._delay;
@@ -4244,7 +4464,7 @@ class WebAnimationsPlayer {
         const keyframes = this.keyframes;
         this.domPlayer =
             this._triggerWebAnimation(this.element, keyframes, this.options);
-        this._finalKeyframe = keyframes.length ? keyframes[keyframes.length - 1] : {};
+        this._finalKeyframe = keyframes.length ? keyframes[keyframes.length - 1] : new Map();
         this.domPlayer.addEventListener('finish', () => this._onFinish());
     }
     _preparePlayerBeforeStart() {
@@ -4256,11 +4476,18 @@ class WebAnimationsPlayer {
             this.domPlayer.pause();
         }
     }
+    _convertKeyframesToObject(keyframes) {
+        const kfs = [];
+        keyframes.forEach(frame => {
+            kfs.push(Object.fromEntries(frame));
+        });
+        return kfs;
+    }
     /** @internal */
     _triggerWebAnimation(element, keyframes, options) {
         // jscompiler doesn't seem to know animate is a native property because it's not fully
         // supported yet across common browsers (we polyfill it for Edge/Safari) [CL #143630929]
-        return element['animate'](keyframes, options);
+        return element['animate'](this._convertKeyframesToObject(keyframes), options);
     }
     onStart(fn) {
         this._onStartFns.push(fn);
@@ -4338,15 +4565,15 @@ class WebAnimationsPlayer {
         return this._delay + this._duration;
     }
     beforeDestroy() {
-        const styles = {};
+        const styles = new Map();
         if (this.hasStarted()) {
             // note: this code is invoked only when the `play` function was called prior to this
             // (thus `hasStarted` returns true), this implies that the code that initializes
             // `_finalKeyframe` has also been executed and the non-null assertion can be safely used here
             const finalKeyframe = this._finalKeyframe;
-            Object.keys(finalKeyframe).forEach(prop => {
-                if (prop != 'offset') {
-                    styles[prop] = this._finished ? finalKeyframe[prop] : computeStyle(this.element, prop);
+            finalKeyframe.forEach((val, prop) => {
+                if (prop !== 'offset') {
+                    styles.set(prop, this._finished ? val : computeStyle(this.element, prop));
                 }
             });
         }
@@ -4354,7 +4581,7 @@ class WebAnimationsPlayer {
     }
     /** @internal */
     triggerCallback(phaseName) {
-        const methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns;
+        const methods = phaseName === 'start' ? this._onStartFns : this._onDoneFns;
         methods.forEach(fn => fn());
         methods.length = 0;
     }
@@ -4364,6 +4591,14 @@ class WebAnimationsDriver {
     validateStyleProperty(prop) {
         return validateStyleProperty(prop);
     }
+    validateAnimatableStyleProperty(prop) {
+        // Perform actual validation in dev mode only, in prod mode this check is a noop.
+        if (ngDevMode) {
+            const cssProp = camelCaseToDashCase(prop);
+            return validateWebAnimatableStyleProperty(cssProp);
+        }
+        return true;
+    }
     matchesElement(_element, _selector) {
         // This method is deprecated and no longer in use so we return false.
         return false;
@@ -4388,18 +4623,17 @@ class WebAnimationsDriver {
         if (easing) {
             playerOptions['easing'] = easing;
         }
-        const previousStyles = {};
+        const previousStyles = new Map();
         const previousWebAnimationPlayers = previousPlayers.filter(player => player instanceof WebAnimationsPlayer);
         if (allowPreviousPlayerStylesMerge(duration, delay)) {
             previousWebAnimationPlayers.forEach(player => {
-                let styles = player.currentSnapshot;
-                Object.keys(styles).forEach(prop => previousStyles[prop] = styles[prop]);
+                player.currentSnapshot.forEach((val, prop) => previousStyles.set(prop, val));
             });
         }
-        keyframes = keyframes.map(styles => copyStyles(styles, false));
-        keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles);
-        const specialStyles = packageNonAnimatableStyles(element, keyframes);
-        return new WebAnimationsPlayer(element, keyframes, playerOptions, specialStyles);
+        let _keyframes = normalizeKeyframes(keyframes).map(styles => copyStyles(styles));
+        _keyframes = balancePreviousStylesIntoKeyframes(element, _keyframes, previousStyles);
+        const specialStyles = packageNonAnimatableStyles(element, _keyframes);
+        return new WebAnimationsPlayer(element, _keyframes, playerOptions, specialStyles);
     }
 }
 
@@ -4439,5 +4673,5 @@ class WebAnimationsDriver {
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationDriver as ɵNoopAnimationDriver, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, containsElement as ɵcontainsElement, getParentElement as ɵgetParentElement, invokeQuery as ɵinvokeQuery, validateStyleProperty as ɵvalidateStyleProperty };
+export { AnimationDriver, Animation as ɵAnimation, AnimationEngine as ɵAnimationEngine, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationDriver as ɵNoopAnimationDriver, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsDriver as ɵWebAnimationsDriver, WebAnimationsPlayer as ɵWebAnimationsPlayer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, allowPreviousPlayerStylesMerge as ɵallowPreviousPlayerStylesMerge, containsElement as ɵcontainsElement, getParentElement as ɵgetParentElement, invokeQuery as ɵinvokeQuery, normalizeKeyframes as ɵnormalizeKeyframes, validateStyleProperty as ɵvalidateStyleProperty };
 //# sourceMappingURL=browser.mjs.map