{
  "id": "api/animations/AnimationOptions",
  "title": "AnimationOptions",
  "contents": "\n\n<article>\n  <div class=\"breadcrumb-container\">\n    <div class=\"breadcrumb\">\n      <script type=\"application/ld+json\">\n        {\n          \"@context\": \"http://schema.org\",\n          \"@type\": \"BreadcrumbList\",\n          \"itemListElement\": [\n            { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n            { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/animations\", \"name\": \"@angular/animations\" } },\n            { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/animations/AnimationOptions\", \"name\": \"AnimationOptions\" } }\n          ]\n        }\n      </script>\n        <a href=\"/api\">API</a> > <a href=\"api/animations\">@angular/animations</a>\n    </div>\n    <div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/packages/animations/src/animation_metadata.ts?message=docs(animations)%3A%20describe%20your%20change...#L44-L77\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n  <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/animations/src/animation_metadata.ts#L44-L77\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n  </div>\n  \n  <header class=\"api-header\">\n    <h1 id=\"animationoptions\">AnimationOptions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/AnimationOptions#animationoptions\"><i class=\"material-icons\">link</i></a></h1>\n    \n    <label class=\"api-type-label interface\">interface</label>\n    \n    \n    \n  </header>\n  \n  <aio-toc class=\"embedded\"></aio-toc>\n\n  <div class=\"api-body\">\n    \n  <section class=\"short-description\">\n    <p>Options that control animation styling and timing.</p>\n\n    <p><a href=\"api/animations/AnimationOptions#description\">See more...</a></p>\n  </section>\n  \n  \n  <section class=\"interface-overview\">\n<code-example language=\"ts\" hidecopy=\"true\">\ninterface <a href=\"api/animations/AnimationOptions\" class=\"code-anchor\">AnimationOptions</a> {\n  <a class=\"code-anchor\" href=\"api/animations/AnimationOptions#delay\"><span class=\"member-name\">delay</span>?: number | string</a>\n  <a class=\"code-anchor\" href=\"api/animations/AnimationOptions#params\"><span class=\"member-name\">params</span>?: {...}</a>\n}\n</code-example>\n\n  \n  \n  <div class=\"descendants interface\">\n    <h2 id=\"child-interfaces\">Child interfaces<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/AnimationOptions#child-interfaces\"><i class=\"material-icons\">link</i></a></h2>\n    \n\n<ul>\n  \n    <li>\n      <code><a href=\"api/animations/AnimateChildOptions\" class=\"code-anchor\">AnimateChildOptions</a></code>\n      \n\n\n    </li>\n  \n    <li>\n      <code><a href=\"api/animations/AnimationQueryOptions\" class=\"code-anchor\">AnimationQueryOptions</a></code>\n      \n\n\n    </li>\n  \n</ul>\n\n\n  </div>\n  \n\n\n  \n  \n\n</section>\n\n  \n\n  \n  \n<section class=\"description\">\n  <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/AnimationOptions#description\"><i class=\"material-icons\">link</i></a></h2>\n  <p>The following animation functions accept <code><a href=\"api/animations/AnimationOptions\" class=\"code-anchor\">AnimationOptions</a></code> data:</p>\n<ul>\n<li><code><a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>()</code></li>\n<li><code><a href=\"api/animations/sequence\" class=\"code-anchor\">sequence</a>()</code></li>\n<li><code><a href=\"api/animations/group\">group()</a></code></li>\n<li><code><a href=\"api/animations/query\" class=\"code-anchor\">query</a>()</code></li>\n<li><code><a href=\"api/animations/animation\" class=\"code-anchor\">animation</a>()</code></li>\n<li><code><a href=\"api/animations/useAnimation\" class=\"code-anchor\">useAnimation</a>()</code></li>\n<li><code><a href=\"api/animations/animateChild\" class=\"code-anchor\">animateChild</a>()</code></li>\n</ul>\n<p>Programmatic animations built using the <code><a href=\"api/animations/AnimationBuilder\" class=\"code-anchor\">AnimationBuilder</a></code> service also\nmake use of <code><a href=\"api/animations/AnimationOptions\" class=\"code-anchor\">AnimationOptions</a></code>.</p>\n\n  \n</section>\n\n  \n<section class=\"instance-properties\">\n  <h2 id=\"properties\">Properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations/AnimationOptions#properties\"><i class=\"material-icons\">link</i></a></h2>\n  <table class=\"is-full-width list-table property-table\">\n    <thead>\n      <tr>\n        <th>Property</th>\n        <th>Description</th>\n      </tr>\n    </thead>\n    <tbody>\n    \n      <tr class=\"instance-property\">\n        <td>\n          <a id=\"delay\"></a>\n          <code class=\"\"><span class=\"member-name\">delay</span>?: number | string</code>\n        </td>\n        <td>\n          \n          <p>Sets a time-delay for initiating an animation action.\nA number and optional time unit, such as \"1s\" or \"10ms\" for one second\nand 10 milliseconds, respectively.The default unit is milliseconds.\nDefault value is 0, meaning no delay.</p>\n\n          \n          </td>\n    </tr>\n    \n      <tr class=\"instance-property\">\n        <td>\n          <a id=\"params\"></a>\n          <code class=\"\"><span class=\"member-name\">params</span>?: {\n    [name: string]: any;\n}</code>\n        </td>\n        <td>\n          \n          <p>A set of developer-defined parameters that modify styling and timing\nwhen an animation action starts. An array of key-value pairs, where the provided value\nis used as a default.</p>\n\n          \n          </td>\n    </tr>\n    \n    </tbody>\n  </table>\n</section>\n  \n\n\n  \n\n\n  </div>\n</article>\n\n<!-- links to this doc:\n - api/animations\n - api/animations/AnimateChildOptions\n - api/animations/AnimationAnimateChildMetadata\n - api/animations/AnimationAnimateRefMetadata\n - api/animations/AnimationFactory\n - api/animations/AnimationGroupMetadata\n - api/animations/AnimationQueryOptions\n - api/animations/AnimationReferenceMetadata\n - api/animations/AnimationSequenceMetadata\n - api/animations/AnimationTransitionMetadata\n - api/animations/animation\n - api/animations/group\n - api/animations/sequence\n - api/animations/transition\n - api/animations/useAnimation\n - guide/reusable-animations\n-->\n<!-- links from this doc:\n - /api\n - api/animations\n - api/animations/AnimateChildOptions\n - api/animations/AnimationBuilder\n - api/animations/AnimationOptions#animationoptions\n - api/animations/AnimationOptions#child-interfaces\n - api/animations/AnimationOptions#delay\n - api/animations/AnimationOptions#description\n - api/animations/AnimationOptions#params\n - api/animations/AnimationOptions#properties\n - api/animations/AnimationQueryOptions\n - api/animations/animateChild\n - api/animations/animation\n - api/animations/group\n - api/animations/query\n - api/animations/sequence\n - api/animations/transition\n - api/animations/useAnimation\n - https://github.com/angular/angular/edit/master/packages/animations/src/animation_metadata.ts?message=docs(animations)%3A%20describe%20your%20change...#L44-L77\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/animations/src/animation_metadata.ts#L44-L77\n-->"
}