diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md
index 62bccae9980..c22e9ad34d5 100644
--- a/aio/content/guide/animations.md
+++ b/aio/content/guide/animations.md
@@ -82,11 +82,11 @@ In HTML, these attributes are set using ordinary CSS styles such as color and op
 
 ### Animation state and styles
 
-Use Angular's `state()` function to define different states to call at the end of each transition. This function takes two arguments: a unique name like `open` or `closed` and a `style()` function.
+Use Angular's <code>[state](api/animations/state)()</code> function to define different states to call at the end of each transition. This function takes two arguments: a unique name like `open` or `closed` and a `style()` function.
 
 Use the `style()` function to define a set of styles to associate with a given state name. You must use [*camelCase*](guide/glossary#case-conventions) for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`.
 
-Let's see how Angular's `state()` function works with the `style⁣­(⁠)` function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color.
+Let's see how Angular's <code>[state](api/animations/state)()</code> function works with the `style⁣­(⁠)` function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color.
 
 <code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="state1" language="typescript">
 </code-example>
@@ -154,13 +154,13 @@ region="transition2">
 
 <div class="alert is-helpful">
 
-**Note:** Some additional notes on using styles within `state` and `transition` functions.
+**Note:** Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions.
 
-* Use `state()` to define styles that are applied at the end of each transition, they persist after the animation completes.
+* Use <code>[state](api/animations/state)()</code> to define styles that are applied at the end of each transition, they persist after the animation completes.
 
 * Use `transition()` to define intermediate styles, which create the illusion of motion during the animation.
 
-* When animations are disabled, `transition()` styles can be skipped, but `state()` styles can't.
+* When animations are disabled, `transition()` styles can be skipped, but <code>[state](api/animations/state)()</code> styles can't.
 
 * Include multiple state pairs within the same `transition()` argument:<br/> `transition( 'on => off, off => void' )`.
 </div>
@@ -231,7 +231,7 @@ region="trigger">
 
 ### Summary
 
-You learned to add animation to a transition between two states, using `style()` and `state()` along with `animate()` for the timing.
+You learned to add animation to a transition between two states, using `style()` and <code>[state](api/animations/state)()</code> along with `animate()` for the timing.
 
 Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/transition-and-triggers).
 
diff --git a/aio/content/guide/router-tutorial-toh.md b/aio/content/guide/router-tutorial-toh.md
index e254bd3bd00..a2cacc9d150 100644
--- a/aio/content/guide/router-tutorial-toh.md
+++ b/aio/content/guide/router-tutorial-toh.md
@@ -1195,7 +1195,7 @@ First, import the `BrowserAnimationsModule` and add it to the `imports` array:
 <code-example path="router/src/app/app.module.ts" header="src/app/app.module.ts (animations-module)" region="animations-module"></code-example>
 
 Next, add a `data` object to the routes for `HeroListComponent` and `HeroDetailComponent`.
-Transitions are based on `states` and you use the `animation` data from the route to provide a named animation `state` for the transitions.
+Transitions are based on `states` and you use the `animation` data from the route to provide a named animation [`state`](api/animations/state) for the transitions.
 
 <code-example path="router/src/app/heroes/heroes-routing.module.2.ts" header="src/app/heroes/heroes-routing.module.ts (animation data)"></code-example>
 
diff --git a/aio/content/guide/transition-and-triggers.md b/aio/content/guide/transition-and-triggers.md
index be0dabf29b0..45869ee1a74 100644
--- a/aio/content/guide/transition-and-triggers.md
+++ b/aio/content/guide/transition-and-triggers.md
@@ -7,7 +7,7 @@ This chapter also explores multiple animation triggers, animation callbacks, and
 
 ## Predefined states and wildcard matching
 
-In Angular, transition states can be defined explicitly through the `state()` function, or using the predefined `*` (wildcard) and `void` states.
+In Angular, transition states can be defined explicitly through the <code>[state](api/animations/state)()</code> function, or using the predefined `*` (wildcard) and `void` states.
 
 ### Wildcard state
 
@@ -119,7 +119,7 @@ In the component file, the `:enter` transition sets an initial opacity of 0, and
 <code-example path="animations/src/app/insert-remove.component.ts" header="src/app/insert-remove.component.ts" region="enter-leave-trigger" language="typescript">
 </code-example>
 
-Note that this example doesn't need to use `state()`.
+Note that this example doesn't need to use <code>[state](api/animations/state)()</code>.
 
 ## :increment and :decrement in transitions
 
diff --git a/packages/animations/src/animation_metadata.ts b/packages/animations/src/animation_metadata.ts
index 90b9cac4436..e2d04979858 100644
--- a/packages/animations/src/animation_metadata.ts
+++ b/packages/animations/src/animation_metadata.ts
@@ -98,7 +98,7 @@ export declare interface AnimateChildOptions extends AnimationOptions {
 export const enum AnimationMetadataType {
   /**
    * Associates a named animation state with a set of CSS styles.
-   * See `state()`
+   * See [`state()`](api/animations/state)
    */
   State = 0,
   /**
@@ -204,7 +204,7 @@ export interface AnimationTriggerMetadata extends AnimationMetadata {
 
 /**
  * Encapsulates an animation state by associating a state name with a set of CSS styles.
- * Instantiated and returned by the `state()` function.
+ * Instantiated and returned by the [`state()`](api/animations/state) function.
  *
  * @publicApi
  */
@@ -450,13 +450,13 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
 }
 
 /**
- * Creates a named animation trigger, containing a  list of `state()`
+ * 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.
  *
  * @param name An identifying string.
- * @param definitions  An animation definition object, containing an array of `state()`
- * and `transition()` declarations.
+ * @param definitions  An animation definition object, containing an array of
+ * [`state()`](api/animations/state) and `transition()` declarations.
  *
  * @return An object that encapsulates the trigger data.
  *
@@ -744,8 +744,8 @@ export function sequence(
 
 /**
  * Declares a key/value object containing CSS properties/styles that
- * can then be used for an animation `state`, within an animation `sequence`,
- * or as styling data for calls to `animate()` and `keyframes()`.
+ * 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()`.
  *
  * @param tokens A set of CSS styles or HTML styles associated with an animation state.
  * The value can be any of the following:
diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts
index 3ac581b69a2..bcd0233426a 100644
--- a/packages/core/src/metadata/directives.ts
+++ b/packages/core/src/metadata/directives.ts
@@ -509,7 +509,7 @@ export interface Component extends Directive {
 
   /**
    * One or more animation `trigger()` calls, containing
-   * `state()` and `transition()` definitions.
+   * [`state()`](api/animations/state) and `transition()` definitions.
    * See the [Animations guide](/guide/animations) and animations API documentation.
    *
    */