@angular/animations 19.2.1 → 19.2.3

package/index.d.ts

@@ -1,112 +1,29 @@
 /**
- * @license Angular v19.2.1
+ * @license Angular v19.2.3
  * (c) 2010-2025 Google LLC. https://angular.io/
  * License: MIT
  */
 
-
 import * as i0 from '@angular/core';
 import { RendererFactory2 } from '@angular/core';
 
 /**
- * Defines an animation step that combines styling information with timing information.
- *
- * @param timings Sets `AnimateTimings` for the parent animation.
- * A string in the format "duration [delay] [easing]".
- *  - Duration and delay are expressed as a number and optional time unit,
- * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
- * The default unit is milliseconds.
- *  - The easing value controls how the animation accelerates and decelerates
- * during its runtime. Value is one of  `ease`, `ease-in`, `ease-out`,
- * `ease-in-out`, or a `cubic-bezier()` function call.
- * If not supplied, no easing is applied.
- *
- * For example, the string "1s 100ms ease-out" specifies a duration of
- * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style,
- * which decelerates near the end of the duration.
- * @param styles Sets AnimationStyles for the parent animation.
- * A function call to either `style()` or `keyframes()`
- * that returns a collection of CSS style entries to be applied to the parent animation.
- * When null, uses the styles from the destination state.
- * This is useful when describing an animation step that will complete an animation;
- * see "Animating to the final state" in `transitions()`.
- * @returns An object that encapsulates the animation step.
- *
- * @usageNotes
- * Call within an animation `sequence()`, {@link /api/animations/group group()}, or
- * `transition()` call to specify an animation step
- * that applies given style data to the parent animation for a given amount of time.
- *
- * ### Syntax Examples
- * **Timing examples**
- *
- * The following examples show various `timings` specifications.
- * - `animate(500)` : Duration is 500 milliseconds.
- * - `animate("1s")` : Duration is 1000 milliseconds.
- * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds.
- * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in.
- * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10
- * milliseconds, easing according to a bezier curve.
- *
- * **Style examples**
- *
- * The following example calls `style()` to set a single CSS style.
- * ```ts
- * animate(500, style({ background: "red" }))
- * ```
- * The following example calls `keyframes()` to set a CSS style
- * to different values for successive keyframes.
- * ```ts
- * animate(500, keyframes(
- *  [
- *   style({ background: "blue" }),
- *   style({ background: "red" })
- *  ])
- * ```
- *
- * @publicApi
- */
-export declare function animate(timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null): AnimationAnimateMetadata;
-
-/**
- * Executes a queried inner animation element within an animation sequence.
- *
- * @param options An options object that can contain a delay value for the start of the
- * animation, and additional override values for developer-defined parameters.
- * @return An object that encapsulates the child animation data.
- *
- * @usageNotes
- * Each time an animation is triggered in Angular, the parent animation
- * has priority and any child animations are blocked. In order
- * for a child animation to run, the parent animation must query each of the elements
- * containing child animations, and run them using this function.
- *
- * Note that this feature is designed to be used with `query()` and it will only work
- * with animations that are assigned using the Angular animation library. CSS keyframes
- * and transitions are not handled by this API.
- *
- * @publicApi
+ * Represents a set of CSS styles for use in an animation style as a generic.
  */
-export declare function animateChild(options?: AnimateChildOptions | null): AnimationAnimateChildMetadata;
-
+interface ɵStyleData {
+    [key: string]: string | number;
+}
 /**
- * Adds duration options to control animation styling and timing for a child animation.
- *
- * @see {@link animateChild}
- *
- * @publicApi
+ * Represents a set of CSS styles for use in an animation style as a Map.
  */
-export declare interface AnimateChildOptions extends AnimationOptions {
-    duration?: number | string;
-}
-
+type ɵStyleDataMap = Map<string, string | number>;
 /**
  * Represents animation-step timing parameters for an animation step.
  * @see {@link animate}
  *
  * @publicApi
  */
-export declare type AnimateTimings = {
+declare type AnimateTimings = {
     /**
      * The full duration of an animation step. A number and optional time unit,
      * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
@@ -128,259 +45,228 @@ export declare type AnimateTimings = {
      */
     easing: string | null;
 };
-
 /**
- * Produces a reusable animation that can be invoked in another animation or sequence,
- * by calling the `useAnimation()` function.
- *
- * @param steps One or more animation objects, as returned by the `animate()`
- * or `sequence()` function, that form a transformation from one state to another.
- * A sequence is used by default when you pass an array.
- * @param options An options object that can contain a delay value for the start of the
- * animation, and additional developer-defined parameters.
- * Provided values for additional parameters are used as defaults,
- * and override values can be passed to the caller on invocation.
- * @returns An object that encapsulates the animation data.
- *
- * @usageNotes
- * The following example defines a reusable animation, providing some default parameter
- * values.
- *
- * ```ts
- * var fadeAnimation = animation([
- *   style({ opacity: '{{ start }}' }),
- *   animate('{{ time }}',
- *   style({ opacity: '{{ end }}'}))
- *   ],
- *   { params: { time: '1000ms', start: 0, end: 1 }});
- * ```
+ * @description Options that control animation styling and timing.
  *
- * The following invokes the defined animation with a call to `useAnimation()`,
- * passing in override parameter values.
+ * The following animation functions accept `AnimationOptions` data:
  *
- * ```js
- * useAnimation(fadeAnimation, {
- *   params: {
- *     time: '2s',
- *     start: 1,
- *     end: 0
- *   }
- * })
- * ```
+ * - `transition()`
+ * - `sequence()`
+ * - `{@link /api/animations/group group()}`
+ * - `query()`
+ * - `animation()`
+ * - `useAnimation()`
+ * - `animateChild()`
  *
- * If any of the passed-in parameter values are missing from this call,
- * the default values are used. If one or more parameter values are missing before a step is
- * animated, `useAnimation()` throws an error.
+ * Programmatic animations built using the `AnimationBuilder` service also
+ * make use of `AnimationOptions`.
  *
  * @publicApi
  */
-export declare function animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationReferenceMetadata;
-
+declare interface AnimationOptions {
+    /**
+     * Sets a time-delay for initiating an animation action.
+     * A number and optional time unit, such as "1s" or "10ms" for one second
+     * and 10 milliseconds, respectively.The default unit is milliseconds.
+     * Default value is 0, meaning no delay.
+     */
+    delay?: number | string;
+    /**
+     * A set of developer-defined parameters that modify styling and timing
+     * when an animation action starts. An array of key-value pairs, where the provided value
+     * is used as a default.
+     */
+    params?: {
+        [name: string]: any;
+    };
+}
 /**
- * Encapsulates a child animation, that can be run explicitly when the parent is run.
- * Instantiated and returned by the `animateChild` function.
+ * Adds duration options to control animation styling and timing for a child animation.
+ *
+ * @see {@link animateChild}
  *
  * @publicApi
  */
-export declare interface AnimationAnimateChildMetadata extends AnimationMetadata {
-    /**
-     * An options object containing a delay and
-     * developer-defined parameters that provide styling defaults and
-     * can be overridden on invocation. Default delay is 0.
-     */
-    options: AnimationOptions | null;
+declare interface AnimateChildOptions extends AnimationOptions {
+    duration?: number | string;
 }
-
 /**
- * Encapsulates an animation step. Instantiated and returned by
- * the `animate()` function.
+ * @description Constants for the categories of parameters that can be defined for animations.
+ *
+ * A corresponding function defines a set of parameters for each category, and
+ * collects them into a corresponding `AnimationMetadata` object.
  *
  * @publicApi
  */
-export declare interface AnimationAnimateMetadata extends AnimationMetadata {
+declare enum AnimationMetadataType {
     /**
-     * The timing data for the step.
+     * Associates a named animation state with a set of CSS styles.
+     * See [`state()`](api/animations/state)
      */
-    timings: string | number | AnimateTimings;
+    State = 0,
     /**
-     * A set of styles used in the step.
+     * Data for a transition from one animation state to another.
+     * See `transition()`
      */
-    styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null;
-}
-
-/**
- * Encapsulates a reusable animation.
- * Instantiated and returned by the `useAnimation()` function.
- *
- * @publicApi
- */
-export declare interface AnimationAnimateRefMetadata extends AnimationMetadata {
+    Transition = 1,
     /**
-     * An animation reference object.
+     * Contains a set of animation steps.
+     * See `sequence()`
      */
-    animation: AnimationReferenceMetadata;
+    Sequence = 2,
     /**
-     * An options object containing a delay and
-     * developer-defined parameters that provide styling defaults and
-     * can be overridden on invocation. Default delay is 0.
+     * Contains a set of animation steps.
+     * See `{@link /api/animations/group group()}`
      */
-    options: AnimationOptions | null;
+    Group = 3,
+    /**
+     * Contains an animation step.
+     * See `animate()`
+     */
+    Animate = 4,
+    /**
+     * Contains a set of animation steps.
+     * See `keyframes()`
+     */
+    Keyframes = 5,
+    /**
+     * Contains a set of CSS property-value pairs into a named style.
+     * See `style()`
+     */
+    Style = 6,
+    /**
+     * Associates an animation with an entry trigger that can be attached to an element.
+     * See `trigger()`
+     */
+    Trigger = 7,
+    /**
+     * Contains a re-usable animation.
+     * See `animation()`
+     */
+    Reference = 8,
+    /**
+     * Contains data to use in executing child animations returned by a query.
+     * See `animateChild()`
+     */
+    AnimateChild = 9,
+    /**
+     * Contains animation parameters for a re-usable animation.
+     * See `useAnimation()`
+     */
+    AnimateRef = 10,
+    /**
+     * Contains child-animation query data.
+     * See `query()`
+     */
+    Query = 11,
+    /**
+     * Contains data for staggering an animation sequence.
+     * See `stagger()`
+     */
+    Stagger = 12
 }
-
 /**
- * An injectable service that produces an animation sequence programmatically within an
- * Angular component or directive.
- * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.
+ * Specifies automatic styling.
  *
- * @usageNotes
- *
- * To use this service, add it to your component or directive as a dependency.
- * The service is instantiated along with your component.
- *
- * Apps do not typically need to create their own animation players, but if you
- * do need to, follow these steps:
- *
- * 1. Use the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code> method
- * to create a programmatic animation. The method returns an `AnimationFactory` instance.
- *
- * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
- *
- * 3. Use the player object to control the animation programmatically.
- *
- * For example:
- *
- * ```ts
- * // import the service from BrowserAnimationsModule
- * import {AnimationBuilder} from '@angular/animations';
- * // require the service as a dependency
- * class MyCmp {
- *   constructor(private _builder: AnimationBuilder) {}
- *
- *   makeAnimation(element: any) {
- *     // first define a reusable animation
- *     const myAnimation = this._builder.build([
- *       style({ width: 0 }),
- *       animate(1000, style({ width: '100px' }))
- *     ]);
- *
- *     // use the returned factory object to create a player
- *     const player = myAnimation.create(element);
- *
- *     player.play();
- *   }
- * }
- * ```
+ * @publicApi
+ */
+declare const AUTO_STYLE = "*";
+/**
+ * Base for animation data structures.
  *
  * @publicApi
  */
-export declare abstract class AnimationBuilder {
-    /**
-     * Builds a factory for producing a defined animation.
-     * @param animation A reusable animation definition.
-     * @returns A factory object that can create a player for the defined animation.
-     * @see {@link animate}
-     */
-    abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AnimationBuilder, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AnimationBuilder>;
+interface AnimationMetadata {
+    type: AnimationMetadataType;
 }
-
-
 /**
- * An instance of this class is returned as an event parameter when an animation
- * callback is captured for an animation either during the start or done phase.
- *
- * ```ts
- * @Component({
- *   host: {
- *     '[@myAnimationTrigger]': 'someExpression',
- *     '(@myAnimationTrigger.start)': 'captureStartEvent($event)',
- *     '(@myAnimationTrigger.done)': 'captureDoneEvent($event)',
- *   },
- *   animations: [
- *     trigger("myAnimationTrigger", [
- *        // ...
- *     ])
- *   ]
- * })
- * class MyComponent {
- *   someExpression: any = false;
- *   captureStartEvent(event: AnimationEvent) {
- *     // the toState, fromState and totalTime data is accessible from the event variable
- *   }
- *
- *   captureDoneEvent(event: AnimationEvent) {
- *     // the toState, fromState and totalTime data is accessible from the event variable
- *   }
- * }
- * ```
+ * Contains an animation trigger. Instantiated and returned by the
+ * `trigger()` function.
  *
  * @publicApi
  */
-declare interface AnimationEvent_2 {
-    /**
-     * The name of the state from which the animation is triggered.
-     */
-    fromState: string;
+interface AnimationTriggerMetadata extends AnimationMetadata {
     /**
-     * The name of the state in which the animation completes.
+     * The trigger name, used to associate it with an element. Unique within the component.
      */
-    toState: string;
+    name: string;
     /**
-     * The time it takes the animation to complete, in milliseconds.
+     * An animation definition object, containing an array of state and transition declarations.
      */
-    totalTime: number;
+    definitions: AnimationMetadata[];
     /**
-     * The animation phase in which the callback was invoked, one of
-     * "start" or "done".
+     * An options object containing a delay and
+     * developer-defined parameters that provide styling defaults and
+     * can be overridden on invocation. Default delay is 0.
      */
-    phaseName: string;
+    options: {
+        params?: {
+            [name: string]: any;
+        };
+    } | null;
+}
+/**
+ * Encapsulates an animation state by associating a state name with a set of CSS styles.
+ * Instantiated and returned by the [`state()`](api/animations/state) function.
+ *
+ * @publicApi
+ */
+interface AnimationStateMetadata extends AnimationMetadata {
     /**
-     * The element to which the animation is attached.
+     * The state name, unique within the component.
      */
-    element: any;
+    name: string;
     /**
-     * Internal.
+     *  The CSS styles associated with this state.
      */
-    triggerName: string;
+    styles: AnimationStyleMetadata;
     /**
-     * Internal.
+     * An options object containing
+     * developer-defined parameters that provide styling defaults and
+     * can be overridden on invocation.
      */
-    disabled: boolean;
+    options?: {
+        params: {
+            [name: string]: any;
+        };
+    };
 }
-export { AnimationEvent_2 as AnimationEvent }
-
 /**
- * A factory object returned from the
- * <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
- * method.
+ * Encapsulates an animation transition. Instantiated and returned by the
+ * `transition()` function.
  *
  * @publicApi
  */
-export declare abstract class AnimationFactory {
+interface AnimationTransitionMetadata extends AnimationMetadata {
     /**
-     * Creates an `AnimationPlayer` instance for the reusable animation defined by
-     * the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
-     * method that created this factory and attaches the new player a DOM element.
-     *
-     * @param element The DOM element to which to attach the player.
-     * @param options A set of options that can include a time delay and
-     * additional developer-defined parameters.
+     * An expression that describes a state change.
      */
-    abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
+    expr: string | ((fromState: string, toState: string, element?: any, params?: {
+        [key: string]: any;
+    }) => boolean);
+    /**
+     * One or more animation objects to which this transition applies.
+     */
+    animation: AnimationMetadata | AnimationMetadata[];
+    /**
+     * An options object containing a delay and
+     * developer-defined parameters that provide styling defaults and
+     * can be overridden on invocation. Default delay is 0.
+     */
+    options: AnimationOptions | null;
 }
-
 /**
- * Encapsulates an animation group.
- * Instantiated and returned by the `group()` function.
+ * Encapsulates a reusable animation, which is a collection of individual animation steps.
+ * Instantiated and returned by the `animation()` function, and
+ * passed to the `useAnimation()` function.
  *
  * @publicApi
  */
-export declare interface AnimationGroupMetadata extends AnimationMetadata {
+interface AnimationReferenceMetadata extends AnimationMetadata {
     /**
-     * One or more animation or style steps that form this group.
+     *  One or more animation step objects.
      */
-    steps: AnimationMetadata[];
+    animation: AnimationMetadata | AnimationMetadata[];
     /**
      * An options object containing a delay and
      * developer-defined parameters that provide styling defaults and
@@ -388,261 +274,149 @@ export declare interface AnimationGroupMetadata extends AnimationMetadata {
      */
     options: AnimationOptions | null;
 }
-
+/**
+ * Encapsulates an animation query. Instantiated and returned by
+ * the `query()` function.
+ *
+ * @publicApi
+ */
+interface AnimationQueryMetadata extends AnimationMetadata {
+    /**
+     *  The CSS selector for this query.
+     */
+    selector: string;
+    /**
+     * One or more animation step objects.
+     */
+    animation: AnimationMetadata | AnimationMetadata[];
+    /**
+     * A query options object.
+     */
+    options: AnimationQueryOptions | null;
+}
 /**
  * Encapsulates a keyframes sequence. Instantiated and returned by
  * the `keyframes()` function.
  *
  * @publicApi
  */
-export declare interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
+interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
     /**
      * An array of animation styles.
      */
     steps: AnimationStyleMetadata[];
 }
-
 /**
- * Base for animation data structures.
+ * Encapsulates an animation style. Instantiated and returned by
+ * the `style()` function.
  *
  * @publicApi
  */
-export declare interface AnimationMetadata {
-    type: AnimationMetadataType;
+interface AnimationStyleMetadata extends AnimationMetadata {
+    /**
+     * A set of CSS style properties.
+     */
+    styles: '*' | {
+        [key: string]: string | number;
+    } | Array<{
+        [key: string]: string | number;
+    } | '*'>;
+    /**
+     * A percentage of the total animate time at which the style is to be applied.
+     */
+    offset: number | null;
 }
-
 /**
- * @description Constants for the categories of parameters that can be defined for animations.
- *
- * A corresponding function defines a set of parameters for each category, and
- * collects them into a corresponding `AnimationMetadata` object.
+ * Encapsulates an animation step. Instantiated and returned by
+ * the `animate()` function.
  *
  * @publicApi
  */
-export declare enum AnimationMetadataType {
+interface AnimationAnimateMetadata extends AnimationMetadata {
     /**
-     * Associates a named animation state with a set of CSS styles.
-     * See [`state()`](api/animations/state)
+     * The timing data for the step.
      */
-    State = 0,
+    timings: string | number | AnimateTimings;
     /**
-     * Data for a transition from one animation state to another.
-     * See `transition()`
+     * A set of styles used in the step.
      */
-    Transition = 1,
+    styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null;
+}
+/**
+ * Encapsulates a child animation, that can be run explicitly when the parent is run.
+ * Instantiated and returned by the `animateChild` function.
+ *
+ * @publicApi
+ */
+interface AnimationAnimateChildMetadata extends AnimationMetadata {
     /**
-     * Contains a set of animation steps.
-     * See `sequence()`
+     * An options object containing a delay and
+     * developer-defined parameters that provide styling defaults and
+     * can be overridden on invocation. Default delay is 0.
      */
-    Sequence = 2,
+    options: AnimationOptions | null;
+}
+/**
+ * Encapsulates a reusable animation.
+ * Instantiated and returned by the `useAnimation()` function.
+ *
+ * @publicApi
+ */
+interface AnimationAnimateRefMetadata extends AnimationMetadata {
     /**
-     * Contains a set of animation steps.
-     * See `{@link /api/animations/group group()}`
+     * An animation reference object.
      */
-    Group = 3,
+    animation: AnimationReferenceMetadata;
     /**
-     * Contains an animation step.
-     * See `animate()`
+     * An options object containing a delay and
+     * developer-defined parameters that provide styling defaults and
+     * can be overridden on invocation. Default delay is 0.
      */
-    Animate = 4,
-    /**
-     * Contains a set of animation steps.
-     * See `keyframes()`
-     */
-    Keyframes = 5,
-    /**
-     * Contains a set of CSS property-value pairs into a named style.
-     * See `style()`
-     */
-    Style = 6,
-    /**
-     * Associates an animation with an entry trigger that can be attached to an element.
-     * See `trigger()`
-     */
-    Trigger = 7,
-    /**
-     * Contains a re-usable animation.
-     * See `animation()`
-     */
-    Reference = 8,
-    /**
-     * Contains data to use in executing child animations returned by a query.
-     * See `animateChild()`
-     */
-    AnimateChild = 9,
-    /**
-     * Contains animation parameters for a re-usable animation.
-     * See `useAnimation()`
-     */
-    AnimateRef = 10,
-    /**
-     * Contains child-animation query data.
-     * See `query()`
-     */
-    Query = 11,
-    /**
-     * Contains data for staggering an animation sequence.
-     * See `stagger()`
-     */
-    Stagger = 12
-}
-
-/**
- * @description Options that control animation styling and timing.
- *
- * The following animation functions accept `AnimationOptions` data:
- *
- * - `transition()`
- * - `sequence()`
- * - `{@link /api/animations/group group()}`
- * - `query()`
- * - `animation()`
- * - `useAnimation()`
- * - `animateChild()`
- *
- * Programmatic animations built using the `AnimationBuilder` service also
- * make use of `AnimationOptions`.
- *
- * @publicApi
- */
-export declare interface AnimationOptions {
-    /**
-     * Sets a time-delay for initiating an animation action.
-     * A number and optional time unit, such as "1s" or "10ms" for one second
-     * and 10 milliseconds, respectively.The default unit is milliseconds.
-     * Default value is 0, meaning no delay.
-     */
-    delay?: number | string;
-    /**
-     * A set of developer-defined parameters that modify styling and timing
-     * when an animation action starts. An array of key-value pairs, where the provided value
-     * is used as a default.
-     */
-    params?: {
-        [name: string]: any;
-    };
+    options: AnimationOptions | null;
 }
-
-
 /**
- * Provides programmatic control of a reusable animation sequence,
- * built using the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
- * method which returns an `AnimationFactory`, whose
- * <code>[create](api/animations/AnimationFactory#create)()</code> method instantiates and
- * initializes this interface.
- *
- * @see {@link AnimationBuilder}
- * @see {@link AnimationFactory}
- * @see {@link animate}
+ * Encapsulates an animation sequence.
+ * Instantiated and returned by the `sequence()` function.
  *
  * @publicApi
  */
-export declare interface AnimationPlayer {
-    /**
-     * Provides a callback to invoke when the animation finishes.
-     * @param fn The callback function.
-     * @see {@link #finish}
-     */
-    onDone(fn: () => void): void;
-    /**
-     * Provides a callback to invoke when the animation starts.
-     * @param fn The callback function.
-     * @see {@link #play}
-     */
-    onStart(fn: () => void): void;
-    /**
-     * Provides a callback to invoke after the animation is destroyed.
-     * @param fn The callback function.
-     * @see {@link #destroy}
-     * @see {@link #beforeDestroy}
-     */
-    onDestroy(fn: () => void): void;
-    /**
-     * Initializes the animation.
-     */
-    init(): void;
-    /**
-     * Reports whether the animation has started.
-     * @returns True if the animation has started, false otherwise.
-     */
-    hasStarted(): boolean;
-    /**
-     * Runs the animation, invoking the `onStart()` callback.
-     */
-    play(): void;
-    /**
-     * Pauses the animation.
-     */
-    pause(): void;
-    /**
-     * Restarts the paused animation.
-     */
-    restart(): void;
+interface AnimationSequenceMetadata extends AnimationMetadata {
     /**
-     * Ends the animation, invoking the `onDone()` callback.
-     */
-    finish(): void;
-    /**
-     * Destroys the animation, after invoking the `beforeDestroy()` callback.
-     * Calls the `onDestroy()` callback when destruction is completed.
-     */
-    destroy(): void;
-    /**
-     * Resets the animation to its initial state.
-     */
-    reset(): void;
-    /**
-     * Sets the position of the animation.
-     * @param position A fractional value, representing the progress through the animation.
-     */
-    setPosition(position: number): void;
-    /**
-     * Reports the current position of the animation.
-     * @returns A fractional value, representing the progress through the animation.
-     */
-    getPosition(): number;
-    /**
-     * The parent of this player, if any.
-     */
-    parentPlayer: AnimationPlayer | null;
-    /**
-     * The total run time of the animation, in milliseconds.
+     *  An array of animation step objects.
      */
-    readonly totalTime: number;
+    steps: AnimationMetadata[];
     /**
-     * Provides a callback to invoke before the animation is destroyed.
+     * An options object containing a delay and
+     * developer-defined parameters that provide styling defaults and
+     * can be overridden on invocation. Default delay is 0.
      */
-    beforeDestroy?: () => any;
+    options: AnimationOptions | null;
 }
-
 /**
- * Encapsulates an animation query. Instantiated and returned by
- * the `query()` function.
+ * Encapsulates an animation group.
+ * Instantiated and returned by the `group()` function.
  *
  * @publicApi
  */
-export declare interface AnimationQueryMetadata extends AnimationMetadata {
-    /**
-     *  The CSS selector for this query.
-     */
-    selector: string;
+interface AnimationGroupMetadata extends AnimationMetadata {
     /**
-     * One or more animation step objects.
+     * One or more animation or style steps that form this group.
      */
-    animation: AnimationMetadata | AnimationMetadata[];
+    steps: AnimationMetadata[];
     /**
-     * A query options object.
+     * An options object containing a delay and
+     * developer-defined parameters that provide styling defaults and
+     * can be overridden on invocation. Default delay is 0.
      */
-    options: AnimationQueryOptions | null;
+    options: AnimationOptions | null;
 }
-
 /**
  * Encapsulates animation query options.
  * Passed to the `query()` function.
  *
  * @publicApi
  */
-export declare interface AnimationQueryOptions extends AnimationOptions {
+declare interface AnimationQueryOptions extends AnimationOptions {
     /**
      * True if this query is optional, false if it is required. Default is false.
      * A required query throws an error if no elements are retrieved when
@@ -657,53 +431,13 @@ export declare interface AnimationQueryOptions extends AnimationOptions {
      */
     limit?: number;
 }
-
-/**
- * Encapsulates a reusable animation, which is a collection of individual animation steps.
- * Instantiated and returned by the `animation()` function, and
- * passed to the `useAnimation()` function.
- *
- * @publicApi
- */
-export declare interface AnimationReferenceMetadata extends AnimationMetadata {
-    /**
-     *  One or more animation step objects.
-     */
-    animation: AnimationMetadata | AnimationMetadata[];
-    /**
-     * An options object containing a delay and
-     * developer-defined parameters that provide styling defaults and
-     * can be overridden on invocation. Default delay is 0.
-     */
-    options: AnimationOptions | null;
-}
-
-/**
- * Encapsulates an animation sequence.
- * Instantiated and returned by the `sequence()` function.
- *
- * @publicApi
- */
-export declare interface AnimationSequenceMetadata extends AnimationMetadata {
-    /**
-     *  An array of animation step objects.
-     */
-    steps: AnimationMetadata[];
-    /**
-     * An options object containing a delay and
-     * developer-defined parameters that provide styling defaults and
-     * can be overridden on invocation. Default delay is 0.
-     */
-    options: AnimationOptions | null;
-}
-
 /**
  * Encapsulates parameters for staggering the start times of a set of animation steps.
  * Instantiated and returned by the `stagger()` function.
  *
  * @publicApi
  **/
-export declare interface AnimationStaggerMetadata extends AnimationMetadata {
+interface AnimationStaggerMetadata extends AnimationMetadata {
     /**
      * The timing data for the steps.
      */
@@ -713,358 +447,248 @@ export declare interface AnimationStaggerMetadata extends AnimationMetadata {
      */
     animation: AnimationMetadata | AnimationMetadata[];
 }
-
-/**
- * Encapsulates an animation state by associating a state name with a set of CSS styles.
- * Instantiated and returned by the [`state()`](api/animations/state) function.
- *
- * @publicApi
- */
-export declare interface AnimationStateMetadata extends AnimationMetadata {
-    /**
-     * The state name, unique within the component.
-     */
-    name: string;
-    /**
-     *  The CSS styles associated with this state.
-     */
-    styles: AnimationStyleMetadata;
-    /**
-     * An options object containing
-     * developer-defined parameters that provide styling defaults and
-     * can be overridden on invocation.
-     */
-    options?: {
-        params: {
-            [name: string]: any;
-        };
-    };
-}
-
 /**
- * Encapsulates an animation style. Instantiated and returned by
- * the `style()` function.
+ * Creates a named animation trigger, containing a  list of [`state()`](api/animations/state)
+ * and `transition()` entries to be evaluated when the expression
+ * bound to the trigger changes.
  *
- * @publicApi
- */
-export declare interface AnimationStyleMetadata extends AnimationMetadata {
-    /**
-     * A set of CSS style properties.
-     */
-    styles: '*' | {
-        [key: string]: string | number;
-    } | Array<{
-        [key: string]: string | number;
-    } | '*'>;
-    /**
-     * A percentage of the total animate time at which the style is to be applied.
-     */
-    offset: number | null;
-}
-
-/**
- * Encapsulates an animation transition. Instantiated and returned by the
- * `transition()` function.
+ * @param name An identifying string.
+ * @param definitions  An animation definition object, containing an array of
+ * [`state()`](api/animations/state) and `transition()` declarations.
  *
- * @publicApi
- */
-export declare interface AnimationTransitionMetadata extends AnimationMetadata {
-    /**
-     * An expression that describes a state change.
-     */
-    expr: string | ((fromState: string, toState: string, element?: any, params?: {
-        [key: string]: any;
-    }) => boolean);
-    /**
-     * One or more animation objects to which this transition applies.
-     */
-    animation: AnimationMetadata | AnimationMetadata[];
-    /**
-     * An options object containing a delay and
-     * developer-defined parameters that provide styling defaults and
-     * can be overridden on invocation. Default delay is 0.
-     */
-    options: AnimationOptions | null;
-}
-
-/**
- * Contains an animation trigger. Instantiated and returned by the
- * `trigger()` function.
+ * @return An object that encapsulates the trigger data.
  *
- * @publicApi
- */
-export declare interface AnimationTriggerMetadata extends AnimationMetadata {
-    /**
-     * The trigger name, used to associate it with an element. Unique within the component.
-     */
-    name: string;
-    /**
-     * An animation definition object, containing an array of state and transition declarations.
-     */
-    definitions: AnimationMetadata[];
-    /**
-     * An options object containing a delay and
-     * developer-defined parameters that provide styling defaults and
-     * can be overridden on invocation. Default delay is 0.
-     */
-    options: {
-        params?: {
-            [name: string]: any;
-        };
-    } | null;
-}
-
-/**
- * Specifies automatic styling.
+ * @usageNotes
+ * Define an animation trigger in the `animations` section of `@Component` metadata.
+ * In the template, reference the trigger by name and bind it to a trigger expression that
+ * evaluates to a defined animation state, using the following format:
  *
- * @publicApi
- */
-export declare const AUTO_STYLE = "*";
-
-/**
- * @description Defines a list of animation steps to be run in parallel.
+ * `[@triggerName]="expression"`
  *
- * @param steps An array of animation step objects.
- * - When steps are defined by `style()` or `animate()`
- * function calls, each call within the group is executed instantly.
- * - To specify offset styles to be applied at a later time, define steps with
- * `keyframes()`, or use `animate()` calls with a delay value.
- * For example:
+ * Animation trigger bindings convert all values to strings, and then match the
+ * previous and current values against any linked transitions.
+ * Booleans can be specified as `1` or `true` and `0` or `false`.
+ *
+ * ### Usage Example
+ *
+ * The following example creates an animation trigger reference based on the provided
+ * name value.
+ * The provided animation value is expected to be an array consisting of state and
+ * transition declarations.
  *
  * ```ts
- * group([
- *   animate("1s", style({ background: "black" })),
- *   animate("2s", style({ color: "white" }))
- * ])
+ * @Component({
+ *   selector: "my-component",
+ *   templateUrl: "my-component-tpl.html",
+ *   animations: [
+ *     trigger("myAnimationTrigger", [
+ *       state(...),
+ *       state(...),
+ *       transition(...),
+ *       transition(...)
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   myStatusExp = "something";
+ * }
  * ```
  *
- * @param options An options object containing a delay and
- * developer-defined parameters that provide styling defaults and
- * can be overridden on invocation.
+ * The template associated with this component makes use of the defined trigger
+ * by binding to an element within its template code.
  *
- * @return An object that encapsulates the group data.
+ * ```html
+ * <!-- somewhere inside of my-component-tpl.html -->
+ * <div [@myAnimationTrigger]="myStatusExp">...</div>
+ * ```
  *
- * @usageNotes
- * Grouped animations are useful when a series of styles must be
- * animated at different starting times and closed off at different ending times.
+ * ### Using an inline function
+ * The `transition` animation method also supports reading an inline function which can decide
+ * if its associated animation should be run.
  *
- * When called within a `sequence()` or a
- * `transition()` call, does not continue to the next
- * instruction until all of the inner animation steps have completed.
+ * ```ts
+ * // this method is run each time the `myAnimationTrigger` trigger value changes.
+ * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
+ string]: any}): boolean {
+ *   // notice that `element` and `params` are also available here
+ *   return toState == 'yes-please-animate';
+ * }
  *
- * @publicApi
- */
-export declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;
-
-/**
- * Defines a set of animation styles, associating each style with an optional `offset` value.
+ * @Component({
+ *   selector: 'my-component',
+ *   templateUrl: 'my-component-tpl.html',
+ *   animations: [
+ *     trigger('myAnimationTrigger', [
+ *       transition(myInlineMatcherFn, [
+ *         // the animation sequence code
+ *       ]),
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   myStatusExp = "yes-please-animate";
+ * }
+ * ```
  *
- * @param steps A set of animation styles with optional offset data.
- * The optional `offset` value for a style specifies a percentage of the total animation
- * time at which that style is applied.
- * @returns An object that encapsulates the keyframes data.
+ * ### Disabling Animations
+ * When true, the special animation control binding `@.disabled` binding prevents
+ * all animations from rendering.
+ * Place the  `@.disabled` binding on an element to disable
+ * animations on the element itself, as well as any inner animation triggers
+ * within the element.
  *
- * @usageNotes
- * Use with the `animate()` call. Instead of applying animations
- * from the current state
- * to the destination state, keyframes describe how each style entry is applied and at what point
- * within the animation arc.
- * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).
+ * The following example shows how to use this feature:
  *
- * ### Usage
+ * ```angular-ts
+ * @Component({
+ *   selector: 'my-component',
+ *   template: `
+ *     <div [@.disabled]="isDisabled">
+ *       <div [@childAnimation]="exp"></div>
+ *     </div>
+ *   `,
+ *   animations: [
+ *     trigger("childAnimation", [
+ *       // ...
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   isDisabled = true;
+ *   exp = '...';
+ * }
+ * ```
  *
- * In the following example, the offset values describe
- * when each `backgroundColor` value is applied. The color is red at the start, and changes to
- * blue when 20% of the total time has elapsed.
+ * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,
+ * along with any inner animations.
+ *
+ * ### Disable animations application-wide
+ * When an area of the template is set to have animations disabled,
+ * **all** inner components have their animations disabled as well.
+ * This means that you can disable all animations for an app
+ * by placing a host binding set on `@.disabled` on the topmost Angular component.
  *
  * ```ts
- * // the provided offset values
- * animate("5s", keyframes([
- *   style({ backgroundColor: "red", offset: 0 }),
- *   style({ backgroundColor: "blue", offset: 0.2 }),
- *   style({ backgroundColor: "orange", offset: 0.3 }),
- *   style({ backgroundColor: "black", offset: 1 })
- * ]))
- * ```
+ * import {Component, HostBinding} from '@angular/core';
  *
- * If there are no `offset` values specified in the style entries, the offsets
- * are calculated automatically.
+ * @Component({
+ *   selector: 'app-component',
+ *   templateUrl: 'app.component.html',
+ * })
+ * class AppComponent {
+ *   @HostBinding('@.disabled')
+ *   public animationsDisabled = true;
+ * }
+ * ```
  *
- * ```ts
- * animate("5s", keyframes([
- *   style({ backgroundColor: "red" }) // offset = 0
- *   style({ backgroundColor: "blue" }) // offset = 0.33
- *   style({ backgroundColor: "orange" }) // offset = 0.66
- *   style({ backgroundColor: "black" }) // offset = 1
- * ]))
- *```
-
- * @publicApi
- */
-export declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata;
-
-/**
- * An empty programmatic controller for reusable animations.
- * Used internally when animations are disabled, to avoid
- * checking for the null case when an animation player is expected.
+ * ### Overriding disablement of inner animations
+ * Despite inner animations being disabled, a parent animation can `query()`
+ * for inner elements located in disabled areas of the template and still animate
+ * them if needed. This is also the case for when a sub animation is
+ * queried by a parent and then later animated using `animateChild()`.
  *
- * @see {@link animate}
- * @see {@link AnimationPlayer}
+ * ### Detecting when an animation is disabled
+ * If a region of the DOM (or the entire application) has its animations disabled, the animation
+ * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides
+ * an instance of an `AnimationEvent`. If animations are disabled,
+ * the `.disabled` flag on the event is true.
  *
  * @publicApi
  */
-export declare class NoopAnimationPlayer implements AnimationPlayer {
-    private _onDoneFns;
-    private _onStartFns;
-    private _onDestroyFns;
-    private _originalOnDoneFns;
-    private _originalOnStartFns;
-    private _started;
-    private _destroyed;
-    private _finished;
-    private _position;
-    parentPlayer: AnimationPlayer | null;
-    readonly totalTime: number;
-    constructor(duration?: number, delay?: number);
-    private _onFinish;
-    onStart(fn: () => void): void;
-    onDone(fn: () => void): void;
-    onDestroy(fn: () => void): void;
-    hasStarted(): boolean;
-    init(): void;
-    play(): void;
-    private _onStart;
-    pause(): void;
-    restart(): void;
-    finish(): void;
-    destroy(): void;
-    reset(): void;
-    setPosition(position: number): void;
-    getPosition(): number;
-}
-
+declare function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata;
 /**
- * Finds one or more inner elements within the current element that is
- * being animated within a sequence. Use with `animate()`.
+ * Defines an animation step that combines styling information with timing information.
  *
- * @param selector The element to query, or a set of elements that contain Angular-specific
- * characteristics, specified with one or more of the following tokens.
- *  - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements (not
- *     all elements can be queried via these tokens, see
- *     [Entering and Leaving Elements](#entering-and-leaving-elements))
- *  - `query(":animating")` : Query all currently animating elements.
- *  - `query("@triggerName")` : Query elements that contain an animation trigger.
- *  - `query("@*")` : Query all elements that contain an animation triggers.
- *  - `query(":self")` : Include the current element into the animation sequence.
+ * @param timings Sets `AnimateTimings` for the parent animation.
+ * A string in the format "duration [delay] [easing]".
+ *  - Duration and delay are expressed as a number and optional time unit,
+ * such as "1s" or "10ms" for one second and 10 milliseconds, respectively.
+ * The default unit is milliseconds.
+ *  - The easing value controls how the animation accelerates and decelerates
+ * during its runtime. Value is one of  `ease`, `ease-in`, `ease-out`,
+ * `ease-in-out`, or a `cubic-bezier()` function call.
+ * If not supplied, no easing is applied.
  *
- * @param animation One or more animation steps to apply to the queried element or elements.
- * An array is treated as an animation sequence.
- * @param options An options object. Use the 'limit' field to limit the total number of
- * items to collect.
- * @return An object that encapsulates the query data.
+ * For example, the string "1s 100ms ease-out" specifies a duration of
+ * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style,
+ * which decelerates near the end of the duration.
+ * @param styles Sets AnimationStyles for the parent animation.
+ * A function call to either `style()` or `keyframes()`
+ * that returns a collection of CSS style entries to be applied to the parent animation.
+ * When null, uses the styles from the destination state.
+ * This is useful when describing an animation step that will complete an animation;
+ * see "Animating to the final state" in `transitions()`.
+ * @returns An object that encapsulates the animation step.
  *
  * @usageNotes
+ * Call within an animation `sequence()`, {@link /api/animations/group group()}, or
+ * `transition()` call to specify an animation step
+ * that applies given style data to the parent animation for a given amount of time.
  *
- * ### Multiple Tokens
- *
- * Tokens can be merged into a combined query selector string. For example:
+ * ### Syntax Examples
+ * **Timing examples**
  *
- * ```ts
- *  query(':self, .record:enter, .record:leave, @subTrigger', [...])
- * ```
+ * The following examples show various `timings` specifications.
+ * - `animate(500)` : Duration is 500 milliseconds.
+ * - `animate("1s")` : Duration is 1000 milliseconds.
+ * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds.
+ * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in.
+ * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10
+ * milliseconds, easing according to a bezier curve.
  *
- * The `query()` function collects multiple elements and works internally by using
- * `element.querySelectorAll`. Use the `limit` field of an options object to limit
- * the total number of items to be collected. For example:
+ * **Style examples**
  *
- * ```js
- * query('div', [
- *   animate(...),
- *   animate(...)
- * ], { limit: 1 })
+ * The following example calls `style()` to set a single CSS style.
+ * ```ts
+ * animate(500, style({ background: "red" }))
  * ```
- *
- * By default, throws an error when zero items are found. Set the
- * `optional` flag to ignore this error. For example:
- *
- * ```js
- * query('.some-element-that-may-not-be-there', [
- *   animate(...),
- *   animate(...)
- * ], { optional: true })
+ * The following example calls `keyframes()` to set a CSS style
+ * to different values for successive keyframes.
+ * ```ts
+ * animate(500, keyframes(
+ *  [
+ *   style({ background: "blue" }),
+ *   style({ background: "red" })
+ *  ])
  * ```
  *
- * ### Entering and Leaving Elements
- *
- * Not all elements can be queried via the `:enter` and `:leave` tokens, the only ones
- * that can are those that Angular assumes can enter/leave based on their own logic
- * (if their insertion/removal is simply a consequence of that of their parent they
- * should be queried via a different token in their parent's `:enter`/`:leave` transitions).
- *
- * The only elements Angular assumes can enter/leave based on their own logic (thus the only
- * ones that can be queried via the `:enter` and `:leave` tokens) are:
- *  - Those inserted dynamically (via `ViewContainerRef`)
- *  - Those that have a structural directive (which, under the hood, are a subset of the above ones)
- *
- * <div class="docs-alert docs-alert-helpful">
- *
- *  Note that elements will be successfully queried via `:enter`/`:leave` even if their
- *  insertion/removal is not done manually via `ViewContainerRef`or caused by their structural
- *  directive (e.g. they enter/exit alongside their parent).
- *
- * </div>
- *
- * <div class="docs-alert docs-alert-important">
- *
- *  There is an exception to what previously mentioned, besides elements entering/leaving based on
- *  their own logic, elements with an animation trigger can always be queried via `:leave` when
- * their parent is also leaving.
+ * @publicApi
+ */
+declare function animate(timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null): AnimationAnimateMetadata;
+/**
+ * @description Defines a list of animation steps to be run in parallel.
  *
- * </div>
+ * @param steps An array of animation step objects.
+ * - When steps are defined by `style()` or `animate()`
+ * function calls, each call within the group is executed instantly.
+ * - To specify offset styles to be applied at a later time, define steps with
+ * `keyframes()`, or use `animate()` calls with a delay value.
+ * For example:
  *
- * ### Usage Example
+ * ```ts
+ * group([
+ *   animate("1s", style({ background: "black" })),
+ *   animate("2s", style({ color: "white" }))
+ * ])
+ * ```
  *
- * The following example queries for inner elements and animates them
- * individually using `animate()`.
+ * @param options An options object containing a delay and
+ * developer-defined parameters that provide styling defaults and
+ * can be overridden on invocation.
  *
- * ```angular-ts
- * @Component({
- *   selector: 'inner',
- *   template: `
- *     <div [@queryAnimation]="exp">
- *       <h1>Title</h1>
- *       <div class="content">
- *         Blah blah blah
- *       </div>
- *     </div>
- *   `,
- *   animations: [
- *    trigger('queryAnimation', [
- *      transition('* => goAnimate', [
- *        // hide the inner elements
- *        query('h1', style({ opacity: 0 })),
- *        query('.content', style({ opacity: 0 })),
+ * @return An object that encapsulates the group data.
  *
- *        // animate the inner elements in, one by one
- *        query('h1', animate(1000, style({ opacity: 1 }))),
- *        query('.content', animate(1000, style({ opacity: 1 }))),
- *      ])
- *    ])
- *  ]
- * })
- * class Cmp {
- *   exp = '';
+ * @usageNotes
+ * Grouped animations are useful when a series of styles must be
+ * animated at different starting times and closed off at different ending times.
  *
- *   goAnimate() {
- *     this.exp = 'goAnimate';
- *   }
- * }
- * ```
+ * When called within a `sequence()` or a
+ * `transition()` call, does not continue to the next
+ * instruction until all of the inner animation steps have completed.
  *
  * @publicApi
  */
-export declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata;
-
+declare function group(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationGroupMetadata;
 /**
  * Defines a list of animation steps to be run sequentially, one by one.
  *
@@ -1098,90 +722,51 @@ export declare function query(selector: string, animation: AnimationMetadata | A
  *
  * @publicApi
  **/
-export declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata;
-
+declare function sequence(steps: AnimationMetadata[], options?: AnimationOptions | null): AnimationSequenceMetadata;
 /**
- * Use within an animation `query()` call to issue a timing gap after
- * each queried item is animated.
- *
- * @param timings A delay value.
- * @param animation One ore more animation steps.
- * @returns An object that encapsulates the stagger data.
- *
- * @usageNotes
- * In the following example, a container element wraps a list of items stamped out
- * by an `ngFor`. The container element contains an animation trigger that will later be set
- * to query for each of the inner items.
- *
- * Each time items are added, the opacity fade-in animation runs,
- * and each removed item is faded out.
- * When either of these animations occur, the stagger effect is
- * applied after each item's animation is started.
- *
- * ```html
- * <!-- list.component.html -->
- * <button (click)="toggle()">Show / Hide Items</button>
- * <hr />
- * <div [@listAnimation]="items.length">
- *   <div *ngFor="let item of items">
- *     {{ item }}
- *   </div>
- * </div>
- * ```
- *
- * Here is the component code:
+ * Declares a key/value object containing CSS properties/styles that
+ * can then be used for an animation [`state`](api/animations/state), within an animation
+ *`sequence`, or as styling data for calls to `animate()` and `keyframes()`.
  *
- * ```ts
- * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
- * @Component({
- *   templateUrl: 'list.component.html',
- *   animations: [
- *     trigger('listAnimation', [
- *     ...
- *     ])
- *   ]
- * })
- * class ListComponent {
- *   items = [];
+ * @param tokens A set of CSS styles or HTML styles associated with an animation state.
+ * The value can be any of the following:
+ * - A key-value style pair associating a CSS property with a value.
+ * - An array of key-value style pairs.
+ * - An asterisk (*), to use auto-styling, where styles are derived from the element
+ * being animated and applied to the animation when it starts.
  *
- *   showItems() {
- *     this.items = [0,1,2,3,4];
- *   }
+ * Auto-styling can be used to define a state that depends on layout or other
+ * environmental factors.
  *
- *   hideItems() {
- *     this.items = [];
- *   }
+ * @return An object that encapsulates the style data.
  *
- *   toggle() {
- *     this.items.length ? this.hideItems() : this.showItems();
- *    }
- *  }
+ * @usageNotes
+ * The following examples create animation styles that collect a set of
+ * CSS property values:
+ *
+ * ```ts
+ * // string values for CSS properties
+ * style({ background: "red", color: "blue" })
+ *
+ * // numerical pixel values
+ * style({ width: 100, height: 0 })
  * ```
  *
- * Here is the animation trigger code:
+ * The following example uses auto-styling to allow an element to animate from
+ * a height of 0 up to its full height:
  *
  * ```ts
- * trigger('listAnimation', [
- *   transition('* => *', [ // each time the binding value changes
- *     query(':leave', [
- *       stagger(100, [
- *         animate('0.5s', style({ opacity: 0 }))
- *       ])
- *     ]),
- *     query(':enter', [
- *       style({ opacity: 0 }),
- *       stagger(100, [
- *         animate('0.5s', style({ opacity: 1 }))
- *       ])
- *     ])
- *   ])
- * ])
+ * style({ height: 0 }),
+ * animate("1s", style({ height: "*" }))
  * ```
  *
  * @publicApi
- */
-export declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;
-
+ **/
+declare function style(tokens: '*' | {
+    [key: string]: string | number;
+} | Array<'*' | {
+    [key: string]: string | number;
+}>): AnimationStyleMetadata;
 /**
  * Declares an animation state within a trigger attached to an element.
  *
@@ -1211,57 +796,57 @@ export declare function stagger(timings: string | number, animation: AnimationMe
  *
  * @publicApi
  **/
-export declare function state(name: string, styles: AnimationStyleMetadata, options?: {
+declare function state(name: string, styles: AnimationStyleMetadata, options?: {
     params: {
         [name: string]: any;
     };
 }): AnimationStateMetadata;
-
 /**
- * Declares a key/value object containing CSS properties/styles that
- * can then be used for an animation [`state`](api/animations/state), within an animation
- *`sequence`, or as styling data for calls to `animate()` and `keyframes()`.
+ * Defines a set of animation styles, associating each style with an optional `offset` value.
  *
- * @param tokens A set of CSS styles or HTML styles associated with an animation state.
- * The value can be any of the following:
- * - A key-value style pair associating a CSS property with a value.
- * - An array of key-value style pairs.
- * - An asterisk (*), to use auto-styling, where styles are derived from the element
- * being animated and applied to the animation when it starts.
+ * @param steps A set of animation styles with optional offset data.
+ * The optional `offset` value for a style specifies a percentage of the total animation
+ * time at which that style is applied.
+ * @returns An object that encapsulates the keyframes data.
  *
- * Auto-styling can be used to define a state that depends on layout or other
- * environmental factors.
+ * @usageNotes
+ * Use with the `animate()` call. Instead of applying animations
+ * from the current state
+ * to the destination state, keyframes describe how each style entry is applied and at what point
+ * within the animation arc.
+ * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp).
  *
- * @return An object that encapsulates the style data.
+ * ### Usage
  *
- * @usageNotes
- * The following examples create animation styles that collect a set of
- * CSS property values:
+ * In the following example, the offset values describe
+ * when each `backgroundColor` value is applied. The color is red at the start, and changes to
+ * blue when 20% of the total time has elapsed.
  *
  * ```ts
- * // string values for CSS properties
- * style({ background: "red", color: "blue" })
- *
- * // numerical pixel values
- * style({ width: 100, height: 0 })
+ * // the provided offset values
+ * animate("5s", keyframes([
+ *   style({ backgroundColor: "red", offset: 0 }),
+ *   style({ backgroundColor: "blue", offset: 0.2 }),
+ *   style({ backgroundColor: "orange", offset: 0.3 }),
+ *   style({ backgroundColor: "black", offset: 1 })
+ * ]))
  * ```
  *
- * The following example uses auto-styling to allow an element to animate from
- * a height of 0 up to its full height:
+ * If there are no `offset` values specified in the style entries, the offsets
+ * are calculated automatically.
  *
  * ```ts
- * style({ height: 0 }),
- * animate("1s", style({ height: "*" }))
- * ```
- *
- * @publicApi
- **/
-export declare function style(tokens: '*' | {
-    [key: string]: string | number;
-} | Array<'*' | {
-    [key: string]: string | number;
-}>): AnimationStyleMetadata;
+ * animate("5s", keyframes([
+ *   style({ backgroundColor: "red" }) // offset = 0
+ *   style({ backgroundColor: "blue" }) // offset = 0.33
+ *   style({ backgroundColor: "orange" }) // offset = 0.66
+ *   style({ backgroundColor: "black" }) // offset = 1
+ * ]))
+ *```
 
+ * @publicApi
+ */
+declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata;
 /**
  * Declares an animation transition which is played when a certain specified condition is met.
  *
@@ -1406,230 +991,575 @@ export declare function style(tokens: '*' | {
  *    ])
  *    ```
  *
- * @publicApi
- **/
-export declare function transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: {
-    [key: string]: any;
-}) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;
-
-/**
- * Creates a named animation trigger, containing a  list of [`state()`](api/animations/state)
- * and `transition()` entries to be evaluated when the expression
- * bound to the trigger changes.
+ * @publicApi
+ **/
+declare function transition(stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: {
+    [key: string]: any;
+}) => boolean), steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationTransitionMetadata;
+/**
+ * Produces a reusable animation that can be invoked in another animation or sequence,
+ * by calling the `useAnimation()` function.
+ *
+ * @param steps One or more animation objects, as returned by the `animate()`
+ * or `sequence()` function, that form a transformation from one state to another.
+ * A sequence is used by default when you pass an array.
+ * @param options An options object that can contain a delay value for the start of the
+ * animation, and additional developer-defined parameters.
+ * Provided values for additional parameters are used as defaults,
+ * and override values can be passed to the caller on invocation.
+ * @returns An object that encapsulates the animation data.
+ *
+ * @usageNotes
+ * The following example defines a reusable animation, providing some default parameter
+ * values.
+ *
+ * ```ts
+ * var fadeAnimation = animation([
+ *   style({ opacity: '{{ start }}' }),
+ *   animate('{{ time }}',
+ *   style({ opacity: '{{ end }}'}))
+ *   ],
+ *   { params: { time: '1000ms', start: 0, end: 1 }});
+ * ```
+ *
+ * The following invokes the defined animation with a call to `useAnimation()`,
+ * passing in override parameter values.
+ *
+ * ```js
+ * useAnimation(fadeAnimation, {
+ *   params: {
+ *     time: '2s',
+ *     start: 1,
+ *     end: 0
+ *   }
+ * })
+ * ```
+ *
+ * If any of the passed-in parameter values are missing from this call,
+ * the default values are used. If one or more parameter values are missing before a step is
+ * animated, `useAnimation()` throws an error.
+ *
+ * @publicApi
+ */
+declare function animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions | null): AnimationReferenceMetadata;
+/**
+ * Executes a queried inner animation element within an animation sequence.
+ *
+ * @param options An options object that can contain a delay value for the start of the
+ * animation, and additional override values for developer-defined parameters.
+ * @return An object that encapsulates the child animation data.
+ *
+ * @usageNotes
+ * Each time an animation is triggered in Angular, the parent animation
+ * has priority and any child animations are blocked. In order
+ * for a child animation to run, the parent animation must query each of the elements
+ * containing child animations, and run them using this function.
+ *
+ * Note that this feature is designed to be used with `query()` and it will only work
+ * with animations that are assigned using the Angular animation library. CSS keyframes
+ * and transitions are not handled by this API.
+ *
+ * @publicApi
+ */
+declare function animateChild(options?: AnimateChildOptions | null): AnimationAnimateChildMetadata;
+/**
+ * Starts a reusable animation that is created using the `animation()` function.
+ *
+ * @param animation The reusable animation to start.
+ * @param options An options object that can contain a delay value for the start of
+ * the animation, and additional override values for developer-defined parameters.
+ * @return An object that contains the animation parameters.
+ *
+ * @publicApi
+ */
+declare function useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions | null): AnimationAnimateRefMetadata;
+/**
+ * Finds one or more inner elements within the current element that is
+ * being animated within a sequence. Use with `animate()`.
+ *
+ * @param selector The element to query, or a set of elements that contain Angular-specific
+ * characteristics, specified with one or more of the following tokens.
+ *  - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements (not
+ *     all elements can be queried via these tokens, see
+ *     [Entering and Leaving Elements](#entering-and-leaving-elements))
+ *  - `query(":animating")` : Query all currently animating elements.
+ *  - `query("@triggerName")` : Query elements that contain an animation trigger.
+ *  - `query("@*")` : Query all elements that contain an animation triggers.
+ *  - `query(":self")` : Include the current element into the animation sequence.
+ *
+ * @param animation One or more animation steps to apply to the queried element or elements.
+ * An array is treated as an animation sequence.
+ * @param options An options object. Use the 'limit' field to limit the total number of
+ * items to collect.
+ * @return An object that encapsulates the query data.
+ *
+ * @usageNotes
+ *
+ * ### Multiple Tokens
+ *
+ * Tokens can be merged into a combined query selector string. For example:
+ *
+ * ```ts
+ *  query(':self, .record:enter, .record:leave, @subTrigger', [...])
+ * ```
+ *
+ * The `query()` function collects multiple elements and works internally by using
+ * `element.querySelectorAll`. Use the `limit` field of an options object to limit
+ * the total number of items to be collected. For example:
+ *
+ * ```js
+ * query('div', [
+ *   animate(...),
+ *   animate(...)
+ * ], { limit: 1 })
+ * ```
+ *
+ * By default, throws an error when zero items are found. Set the
+ * `optional` flag to ignore this error. For example:
+ *
+ * ```js
+ * query('.some-element-that-may-not-be-there', [
+ *   animate(...),
+ *   animate(...)
+ * ], { optional: true })
+ * ```
+ *
+ * ### Entering and Leaving Elements
+ *
+ * Not all elements can be queried via the `:enter` and `:leave` tokens, the only ones
+ * that can are those that Angular assumes can enter/leave based on their own logic
+ * (if their insertion/removal is simply a consequence of that of their parent they
+ * should be queried via a different token in their parent's `:enter`/`:leave` transitions).
+ *
+ * The only elements Angular assumes can enter/leave based on their own logic (thus the only
+ * ones that can be queried via the `:enter` and `:leave` tokens) are:
+ *  - Those inserted dynamically (via `ViewContainerRef`)
+ *  - Those that have a structural directive (which, under the hood, are a subset of the above ones)
+ *
+ * <div class="docs-alert docs-alert-helpful">
  *
- * @param name An identifying string.
- * @param definitions  An animation definition object, containing an array of
- * [`state()`](api/animations/state) and `transition()` declarations.
+ *  Note that elements will be successfully queried via `:enter`/`:leave` even if their
+ *  insertion/removal is not done manually via `ViewContainerRef`or caused by their structural
+ *  directive (e.g. they enter/exit alongside their parent).
  *
- * @return An object that encapsulates the trigger data.
+ * </div>
  *
- * @usageNotes
- * Define an animation trigger in the `animations` section of `@Component` metadata.
- * In the template, reference the trigger by name and bind it to a trigger expression that
- * evaluates to a defined animation state, using the following format:
+ * <div class="docs-alert docs-alert-important">
  *
- * `[@triggerName]="expression"`
+ *  There is an exception to what previously mentioned, besides elements entering/leaving based on
+ *  their own logic, elements with an animation trigger can always be queried via `:leave` when
+ * their parent is also leaving.
  *
- * Animation trigger bindings convert all values to strings, and then match the
- * previous and current values against any linked transitions.
- * Booleans can be specified as `1` or `true` and `0` or `false`.
+ * </div>
  *
  * ### Usage Example
  *
- * The following example creates an animation trigger reference based on the provided
- * name value.
- * The provided animation value is expected to be an array consisting of state and
- * transition declarations.
+ * The following example queries for inner elements and animates them
+ * individually using `animate()`.
  *
- * ```ts
+ * ```angular-ts
  * @Component({
- *   selector: "my-component",
- *   templateUrl: "my-component-tpl.html",
+ *   selector: 'inner',
+ *   template: `
+ *     <div [@queryAnimation]="exp">
+ *       <h1>Title</h1>
+ *       <div class="content">
+ *         Blah blah blah
+ *       </div>
+ *     </div>
+ *   `,
  *   animations: [
- *     trigger("myAnimationTrigger", [
- *       state(...),
- *       state(...),
- *       transition(...),
- *       transition(...)
- *     ])
- *   ]
+ *    trigger('queryAnimation', [
+ *      transition('* => goAnimate', [
+ *        // hide the inner elements
+ *        query('h1', style({ opacity: 0 })),
+ *        query('.content', style({ opacity: 0 })),
+ *
+ *        // animate the inner elements in, one by one
+ *        query('h1', animate(1000, style({ opacity: 1 }))),
+ *        query('.content', animate(1000, style({ opacity: 1 }))),
+ *      ])
+ *    ])
+ *  ]
  * })
- * class MyComponent {
- *   myStatusExp = "something";
+ * class Cmp {
+ *   exp = '';
+ *
+ *   goAnimate() {
+ *     this.exp = 'goAnimate';
+ *   }
  * }
  * ```
  *
- * The template associated with this component makes use of the defined trigger
- * by binding to an element within its template code.
+ * @publicApi
+ */
+declare function query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions | null): AnimationQueryMetadata;
+/**
+ * Use within an animation `query()` call to issue a timing gap after
+ * each queried item is animated.
+ *
+ * @param timings A delay value.
+ * @param animation One ore more animation steps.
+ * @returns An object that encapsulates the stagger data.
+ *
+ * @usageNotes
+ * In the following example, a container element wraps a list of items stamped out
+ * by an `ngFor`. The container element contains an animation trigger that will later be set
+ * to query for each of the inner items.
+ *
+ * Each time items are added, the opacity fade-in animation runs,
+ * and each removed item is faded out.
+ * When either of these animations occur, the stagger effect is
+ * applied after each item's animation is started.
  *
  * ```html
- * <!-- somewhere inside of my-component-tpl.html -->
- * <div [@myAnimationTrigger]="myStatusExp">...</div>
+ * <!-- list.component.html -->
+ * <button (click)="toggle()">Show / Hide Items</button>
+ * <hr />
+ * <div [@listAnimation]="items.length">
+ *   <div *ngFor="let item of items">
+ *     {{ item }}
+ *   </div>
+ * </div>
  * ```
  *
- * ### Using an inline function
- * The `transition` animation method also supports reading an inline function which can decide
- * if its associated animation should be run.
+ * Here is the component code:
  *
  * ```ts
- * // this method is run each time the `myAnimationTrigger` trigger value changes.
- * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key:
- string]: any}): boolean {
- *   // notice that `element` and `params` are also available here
- *   return toState == 'yes-please-animate';
- * }
- *
+ * import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
  * @Component({
- *   selector: 'my-component',
- *   templateUrl: 'my-component-tpl.html',
+ *   templateUrl: 'list.component.html',
  *   animations: [
- *     trigger('myAnimationTrigger', [
- *       transition(myInlineMatcherFn, [
- *         // the animation sequence code
- *       ]),
+ *     trigger('listAnimation', [
+ *     ...
  *     ])
  *   ]
  * })
- * class MyComponent {
- *   myStatusExp = "yes-please-animate";
- * }
- * ```
+ * class ListComponent {
+ *   items = [];
  *
- * ### Disabling Animations
- * When true, the special animation control binding `@.disabled` binding prevents
- * all animations from rendering.
- * Place the  `@.disabled` binding on an element to disable
- * animations on the element itself, as well as any inner animation triggers
- * within the element.
+ *   showItems() {
+ *     this.items = [0,1,2,3,4];
+ *   }
  *
- * The following example shows how to use this feature:
+ *   hideItems() {
+ *     this.items = [];
+ *   }
  *
- * ```angular-ts
- * @Component({
- *   selector: 'my-component',
- *   template: `
- *     <div [@.disabled]="isDisabled">
- *       <div [@childAnimation]="exp"></div>
- *     </div>
- *   `,
- *   animations: [
- *     trigger("childAnimation", [
- *       // ...
- *     ])
- *   ]
- * })
- * class MyComponent {
- *   isDisabled = true;
- *   exp = '...';
- * }
+ *   toggle() {
+ *     this.items.length ? this.hideItems() : this.showItems();
+ *    }
+ *  }
  * ```
  *
- * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating,
- * along with any inner animations.
- *
- * ### Disable animations application-wide
- * When an area of the template is set to have animations disabled,
- * **all** inner components have their animations disabled as well.
- * This means that you can disable all animations for an app
- * by placing a host binding set on `@.disabled` on the topmost Angular component.
+ * Here is the animation trigger code:
  *
  * ```ts
- * import {Component, HostBinding} from '@angular/core';
- *
- * @Component({
- *   selector: 'app-component',
- *   templateUrl: 'app.component.html',
- * })
- * class AppComponent {
- *   @HostBinding('@.disabled')
- *   public animationsDisabled = true;
- * }
+ * trigger('listAnimation', [
+ *   transition('* => *', [ // each time the binding value changes
+ *     query(':leave', [
+ *       stagger(100, [
+ *         animate('0.5s', style({ opacity: 0 }))
+ *       ])
+ *     ]),
+ *     query(':enter', [
+ *       style({ opacity: 0 }),
+ *       stagger(100, [
+ *         animate('0.5s', style({ opacity: 1 }))
+ *       ])
+ *     ])
+ *   ])
+ * ])
  * ```
  *
- * ### Overriding disablement of inner animations
- * Despite inner animations being disabled, a parent animation can `query()`
- * for inner elements located in disabled areas of the template and still animate
- * them if needed. This is also the case for when a sub animation is
- * queried by a parent and then later animated using `animateChild()`.
- *
- * ### Detecting when an animation is disabled
- * If a region of the DOM (or the entire application) has its animations disabled, the animation
- * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides
- * an instance of an `AnimationEvent`. If animations are disabled,
- * the `.disabled` flag on the event is true.
- *
  * @publicApi
  */
-export declare function trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata;
+declare function stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata;
 
 /**
- * Starts a reusable animation that is created using the `animation()` function.
+ * Provides programmatic control of a reusable animation sequence,
+ * built using the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
+ * method which returns an `AnimationFactory`, whose
+ * <code>[create](api/animations/AnimationFactory#create)()</code> method instantiates and
+ * initializes this interface.
  *
- * @param animation The reusable animation to start.
- * @param options An options object that can contain a delay value for the start of
- * the animation, and additional override values for developer-defined parameters.
- * @return An object that contains the animation parameters.
+ * @see {@link AnimationBuilder}
+ * @see {@link AnimationFactory}
+ * @see {@link animate}
  *
  * @publicApi
  */
-export declare function useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions | null): AnimationAnimateRefMetadata;
-
+interface AnimationPlayer {
+    /**
+     * Provides a callback to invoke when the animation finishes.
+     * @param fn The callback function.
+     * @see {@link #finish}
+     */
+    onDone(fn: () => void): void;
+    /**
+     * Provides a callback to invoke when the animation starts.
+     * @param fn The callback function.
+     * @see {@link #play}
+     */
+    onStart(fn: () => void): void;
+    /**
+     * Provides a callback to invoke after the animation is destroyed.
+     * @param fn The callback function.
+     * @see {@link #destroy}
+     * @see {@link #beforeDestroy}
+     */
+    onDestroy(fn: () => void): void;
+    /**
+     * Initializes the animation.
+     */
+    init(): void;
+    /**
+     * Reports whether the animation has started.
+     * @returns True if the animation has started, false otherwise.
+     */
+    hasStarted(): boolean;
+    /**
+     * Runs the animation, invoking the `onStart()` callback.
+     */
+    play(): void;
+    /**
+     * Pauses the animation.
+     */
+    pause(): void;
+    /**
+     * Restarts the paused animation.
+     */
+    restart(): void;
+    /**
+     * Ends the animation, invoking the `onDone()` callback.
+     */
+    finish(): void;
+    /**
+     * Destroys the animation, after invoking the `beforeDestroy()` callback.
+     * Calls the `onDestroy()` callback when destruction is completed.
+     */
+    destroy(): void;
+    /**
+     * Resets the animation to its initial state.
+     */
+    reset(): void;
+    /**
+     * Sets the position of the animation.
+     * @param position A fractional value, representing the progress through the animation.
+     */
+    setPosition(position: number): void;
+    /**
+     * Reports the current position of the animation.
+     * @returns A fractional value, representing the progress through the animation.
+     */
+    getPosition(): number;
+    /**
+     * The parent of this player, if any.
+     */
+    parentPlayer: AnimationPlayer | null;
+    /**
+     * The total run time of the animation, in milliseconds.
+     */
+    readonly totalTime: number;
+    /**
+     * Provides a callback to invoke before the animation is destroyed.
+     */
+    beforeDestroy?: () => any;
+}
 /**
- * A programmatic controller for a group of reusable animations.
- * Used internally to control animations.
+ * An empty programmatic controller for reusable animations.
+ * Used internally when animations are disabled, to avoid
+ * checking for the null case when an animation player is expected.
  *
+ * @see {@link animate}
  * @see {@link AnimationPlayer}
- * @see {@link animations/group group}
  *
+ * @publicApi
  */
-export declare class ɵAnimationGroupPlayer implements AnimationPlayer {
+declare class NoopAnimationPlayer implements AnimationPlayer {
     private _onDoneFns;
     private _onStartFns;
-    private _finished;
+    private _onDestroyFns;
+    private _originalOnDoneFns;
+    private _originalOnStartFns;
     private _started;
     private _destroyed;
-    private _onDestroyFns;
+    private _finished;
+    private _position;
     parentPlayer: AnimationPlayer | null;
-    totalTime: number;
-    readonly players: AnimationPlayer[];
-    constructor(_players: AnimationPlayer[]);
+    readonly totalTime: number;
+    constructor(duration?: number, delay?: number);
     private _onFinish;
-    init(): void;
     onStart(fn: () => void): void;
-    private _onStart;
     onDone(fn: () => void): void;
     onDestroy(fn: () => void): void;
     hasStarted(): boolean;
+    init(): void;
     play(): void;
+    private _onStart;
     pause(): void;
     restart(): void;
     finish(): void;
     destroy(): void;
-    private _onDestroy;
     reset(): void;
-    setPosition(p: number): void;
+    setPosition(position: number): void;
     getPosition(): number;
-    beforeDestroy(): void;
 }
 
-export declare class ɵBrowserAnimationBuilder extends AnimationBuilder {
+/**
+ * An injectable service that produces an animation sequence programmatically within an
+ * Angular component or directive.
+ * Provided by the `BrowserAnimationsModule` or `NoopAnimationsModule`.
+ *
+ * @usageNotes
+ *
+ * To use this service, add it to your component or directive as a dependency.
+ * The service is instantiated along with your component.
+ *
+ * Apps do not typically need to create their own animation players, but if you
+ * do need to, follow these steps:
+ *
+ * 1. Use the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code> method
+ * to create a programmatic animation. The method returns an `AnimationFactory` instance.
+ *
+ * 2. Use the factory object to create an `AnimationPlayer` and attach it to a DOM element.
+ *
+ * 3. Use the player object to control the animation programmatically.
+ *
+ * For example:
+ *
+ * ```ts
+ * // import the service from BrowserAnimationsModule
+ * import {AnimationBuilder} from '@angular/animations';
+ * // require the service as a dependency
+ * class MyCmp {
+ *   constructor(private _builder: AnimationBuilder) {}
+ *
+ *   makeAnimation(element: any) {
+ *     // first define a reusable animation
+ *     const myAnimation = this._builder.build([
+ *       style({ width: 0 }),
+ *       animate(1000, style({ width: '100px' }))
+ *     ]);
+ *
+ *     // use the returned factory object to create a player
+ *     const player = myAnimation.create(element);
+ *
+ *     player.play();
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+declare abstract class AnimationBuilder {
+    /**
+     * Builds a factory for producing a defined animation.
+     * @param animation A reusable animation definition.
+     * @returns A factory object that can create a player for the defined animation.
+     * @see {@link animate}
+     */
+    abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnimationBuilder, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AnimationBuilder>;
+}
+/**
+ * A factory object returned from the
+ * <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
+ * method.
+ *
+ * @publicApi
+ */
+declare abstract class AnimationFactory {
+    /**
+     * Creates an `AnimationPlayer` instance for the reusable animation defined by
+     * the <code>[AnimationBuilder.build](api/animations/AnimationBuilder#build)()</code>
+     * method that created this factory and attaches the new player a DOM element.
+     *
+     * @param element The DOM element to which to attach the player.
+     * @param options A set of options that can include a time delay and
+     * additional developer-defined parameters.
+     */
+    abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
+}
+declare class BrowserAnimationBuilder extends AnimationBuilder {
     private animationModuleType;
     private _nextAnimationId;
     private _renderer;
     constructor(rootRenderer: RendererFactory2, doc: Document);
     build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ɵBrowserAnimationBuilder, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ɵBrowserAnimationBuilder>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BrowserAnimationBuilder, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BrowserAnimationBuilder>;
 }
 
-export declare const ɵPRE_STYLE = "!";
-
+/**
+ * An instance of this class is returned as an event parameter when an animation
+ * callback is captured for an animation either during the start or done phase.
+ *
+ * ```ts
+ * @Component({
+ *   host: {
+ *     '[@myAnimationTrigger]': 'someExpression',
+ *     '(@myAnimationTrigger.start)': 'captureStartEvent($event)',
+ *     '(@myAnimationTrigger.done)': 'captureDoneEvent($event)',
+ *   },
+ *   animations: [
+ *     trigger("myAnimationTrigger", [
+ *        // ...
+ *     ])
+ *   ]
+ * })
+ * class MyComponent {
+ *   someExpression: any = false;
+ *   captureStartEvent(event: AnimationEvent) {
+ *     // the toState, fromState and totalTime data is accessible from the event variable
+ *   }
+ *
+ *   captureDoneEvent(event: AnimationEvent) {
+ *     // the toState, fromState and totalTime data is accessible from the event variable
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+interface AnimationEvent {
+    /**
+     * The name of the state from which the animation is triggered.
+     */
+    fromState: string;
+    /**
+     * The name of the state in which the animation completes.
+     */
+    toState: string;
+    /**
+     * The time it takes the animation to complete, in milliseconds.
+     */
+    totalTime: number;
+    /**
+     * The animation phase in which the callback was invoked, one of
+     * "start" or "done".
+     */
+    phaseName: string;
+    /**
+     * The element to which the animation is attached.
+     */
+    element: any;
+    /**
+     * Internal.
+     */
+    triggerName: string;
+    /**
+     * Internal.
+     */
+    disabled: boolean;
+}
 
 /**
  * The list of error codes used in runtime code of the `animations` package.
  * Reserved error code range: 3000-3999.
  */
-export declare const enum ɵRuntimeErrorCode {
+declare const enum RuntimeErrorCode {
     INVALID_TIMING_VALUE = 3000,
     INVALID_STYLE_PARAMS = 3001,
     INVALID_STYLE_VALUE = 3002,
@@ -1669,17 +1599,44 @@ export declare const enum ɵRuntimeErrorCode {
     BROWSER_ANIMATION_BUILDER_INJECTED_WITHOUT_ANIMATIONS = 3600
 }
 
-
 /**
- * Represents a set of CSS styles for use in an animation style as a generic.
+ * A programmatic controller for a group of reusable animations.
+ * Used internally to control animations.
+ *
+ * @see {@link AnimationPlayer}
+ * @see {@link animations/group group}
+ *
  */
-export declare interface ɵStyleData {
-    [key: string]: string | number;
+declare class AnimationGroupPlayer implements AnimationPlayer {
+    private _onDoneFns;
+    private _onStartFns;
+    private _finished;
+    private _started;
+    private _destroyed;
+    private _onDestroyFns;
+    parentPlayer: AnimationPlayer | null;
+    totalTime: number;
+    readonly players: AnimationPlayer[];
+    constructor(_players: AnimationPlayer[]);
+    private _onFinish;
+    init(): void;
+    onStart(fn: () => void): void;
+    private _onStart;
+    onDone(fn: () => void): void;
+    onDestroy(fn: () => void): void;
+    hasStarted(): boolean;
+    play(): void;
+    pause(): void;
+    restart(): void;
+    finish(): void;
+    destroy(): void;
+    private _onDestroy;
+    reset(): void;
+    setPosition(p: number): void;
+    getPosition(): number;
+    beforeDestroy(): void;
 }
 
-/**
- * Represents a set of CSS styles for use in an animation style as a Map.
- */
-export declare type ɵStyleDataMap = Map<string, string | number>;
+declare const ɵPRE_STYLE = "!";
 
-export { }
+export { AUTO_STYLE, type AnimateChildOptions, type AnimateTimings, type AnimationAnimateChildMetadata, type AnimationAnimateMetadata, type AnimationAnimateRefMetadata, AnimationBuilder, type AnimationEvent, AnimationFactory, type AnimationGroupMetadata, type AnimationKeyframesSequenceMetadata, type AnimationMetadata, AnimationMetadataType, type AnimationOptions, type AnimationPlayer, type AnimationQueryMetadata, type AnimationQueryOptions, type AnimationReferenceMetadata, type AnimationSequenceMetadata, type AnimationStaggerMetadata, type AnimationStateMetadata, type AnimationStyleMetadata, type AnimationTransitionMetadata, type AnimationTriggerMetadata, NoopAnimationPlayer, animate, animateChild, animation, group, keyframes, query, sequence, stagger, state, style, transition, trigger, useAnimation, AnimationGroupPlayer as ɵAnimationGroupPlayer, BrowserAnimationBuilder as ɵBrowserAnimationBuilder, ɵPRE_STYLE, RuntimeErrorCode as ɵRuntimeErrorCode, type ɵStyleData, type ɵStyleDataMap };