diff --git a/aio/content/examples/animations/e2e/src/app.e2e-spec.ts b/aio/content/examples/animations/e2e/src/app.e2e-spec.ts
index f19b62f7ee..c9f9236aad 100644
--- a/aio/content/examples/animations/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/animations/e2e/src/app.e2e-spec.ts
@@ -77,7 +77,7 @@ describe('Animation Tests', () => {
   });
 
   describe('Status Slider Component', () => {
-    const activeColor = 'rgba(255, 165, 0, 1)';
+    const activeColor = 'rgba(117, 70, 0, 1)';
     const inactiveColor = 'rgba(0, 0, 255, 1)';
 
     beforeAll(async () => {
diff --git a/aio/content/examples/animations/src/app/app.component.css b/aio/content/examples/animations/src/app/app.component.css
index 04d8866ac2..ed21b8546c 100644
--- a/aio/content/examples/animations/src/app/app.component.css
+++ b/aio/content/examples/animations/src/app/app.component.css
@@ -1,7 +1,3 @@
-:host {
-  display: block;
-}
-
-section {
-  margin-top: 100px;
+nav a {
+  padding: .7rem;
 }
diff --git a/aio/content/examples/animations/src/app/app.component.html b/aio/content/examples/animations/src/app/app.component.html
index 78d1655313..762020973b 100644
--- a/aio/content/examples/animations/src/app/app.component.html
+++ b/aio/content/examples/animations/src/app/app.component.html
@@ -1,6 +1,10 @@
 <h1>Animations</h1>
 
-Toggle All Animations <input type="checkbox" [checked]="!animationsDisabled" (click)="toggleAnimations()"/>
+<input type="checkbox"
+       id="animation-toggle"
+       [checked]="!animationsDisabled"
+       (click)="toggleAnimations()">
+<label for="animation-toggle">Toggle All Animations</label>
 
 <nav>
   <a id="home" routerLink="/home" routerLinkActive="active">Home</a>
diff --git a/aio/content/examples/animations/src/app/hero-list-page.component.css b/aio/content/examples/animations/src/app/hero-list-page.component.css
index 02b2b9fc8c..3a3e603cbc 100644
--- a/aio/content/examples/animations/src/app/hero-list-page.component.css
+++ b/aio/content/examples/animations/src/app/hero-list-page.component.css
@@ -1,51 +1,33 @@
 .heroes {
-  margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
-  width: 15em;
 }
 
 .heroes li {
-  position: relative;
-  height: 2.3em;
   overflow:hidden;
-  margin: .5em;
+  margin: .5em 0;
 }
 
 .heroes li > .inner {
   cursor: pointer;
   background-color: #EEE;
-  padding: .3em 0;
-  height: 1.6em;
+  padding: .3rem 0;
+  height: 1.6rem;
   border-radius: 4px;
-  width: 19em;
 }
 
 .heroes li:hover > .inner {
-  color: #607D8B;
+  color: black;
   background-color: #DDD;
   transform: translateX(.1em);
 }
 
-.heroes a {
-  color: #888;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.heroes a:hover {
-  color:#607D8B;
-}
-
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
+  background-color: #3d5157;
   position: relative;
   left: -1px;
   top: -4px;
@@ -56,38 +38,12 @@
   border-radius: 4px 0 0 4px;
 }
 
-.button {
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: Arial, sans-serif;
-}
-
-button:hover {
-  background-color: #cfd8dc;
-}
-
-button.delete {
-  position: relative;
-  left: 24em;
-  top: -32px;
-  background-color: gray !important;
-  color: white;
-  display: inherit;
-  padding: 5px 8px;
-  width: 2em;
+label {
+  display: block;
+  padding-bottom: .5rem;
 }
 
 input {
   font-size: 100%;
-  margin-bottom: 2px;
-  width: 11em;
-}
-
-.heroes input {
-  position: relative;
-  top: -3px;
-  width: 12em;
+  margin-bottom: 1rem;
 }
diff --git a/aio/content/examples/animations/src/app/hero-list-page.component.html b/aio/content/examples/animations/src/app/hero-list-page.component.html
index 9e07b62581..5f0e29c8ab 100644
--- a/aio/content/examples/animations/src/app/hero-list-page.component.html
+++ b/aio/content/examples/animations/src/app/hero-list-page.component.html
@@ -2,18 +2,22 @@
 <h2>Filter/Stagger</h2>
 
 <form>
-  <input #criteria (input)="updateCriteria(criteria.value)" placeholder="Search Heroes" />
-</form>    
+  <label for="search">Search heroes: </label>
+  <input type="text"
+         id="search"
+         #criteria (input)="updateCriteria(criteria.value)"
+         placeholder="Search heroes">
+</form>
 
 <!-- #docregion filter-animations -->
 <ul class="heroes" [@filterAnimation]="heroTotal">
-<!-- #enddocregion filter-animations -->  
+<!-- #enddocregion filter-animations -->
   <li *ngFor="let hero of heroes" class="hero">
     <div class="inner">
       <span class="badge">{{ hero.id }}</span>
       <span>{{ hero.name }}</span>
     </div>
   </li>
-<!-- #docregion filter-animations -->  
+<!-- #docregion filter-animations -->
 </ul>
-<!-- #enddocregion filter-animations -->
\ No newline at end of file
+<!-- #enddocregion filter-animations -->
diff --git a/aio/content/examples/animations/src/app/open-close-page.component.ts b/aio/content/examples/animations/src/app/open-close-page.component.ts
index 72bc45caf6..85ece6c313 100644
--- a/aio/content/examples/animations/src/app/open-close-page.component.ts
+++ b/aio/content/examples/animations/src/app/open-close-page.component.ts
@@ -5,7 +5,8 @@ import { Component } from '@angular/core';
   template: `
     <section>
       <h2>Open Close Component</h2>
-      <input type="checkbox" [checked]="logging" (click)="toggleLogging()"/> Console Log Animation Events
+      <input type="checkbox" id="log-checkbox" [checked]="logging" (click)="toggleLogging()"/>
+      <label for="log-checkbox">Console Log Animation Events</label>
 
       <app-open-close [logging]="logging"></app-open-close>
     </section>
diff --git a/aio/content/examples/animations/src/app/open-close.component.4.ts b/aio/content/examples/animations/src/app/open-close.component.4.ts
index 8d03512faf..14ba37f327 100644
--- a/aio/content/examples/animations/src/app/open-close.component.4.ts
+++ b/aio/content/examples/animations/src/app/open-close.component.4.ts
@@ -21,8 +21,8 @@ import { trigger, transition, state, animate, style } from '@angular/animations'
       })),
       state('closed', style({
         width: '100px',
-        opacity: 0.5,
-        backgroundColor: 'green'
+        opacity: 0.8,
+        backgroundColor: '#c6ecff'
       })),
       transition('* => *', [
         animate('1s')
diff --git a/aio/content/examples/animations/src/app/open-close.component.css b/aio/content/examples/animations/src/app/open-close.component.css
index 0ba9d678f8..c7401b7f18 100644
--- a/aio/content/examples/animations/src/app/open-close.component.css
+++ b/aio/content/examples/animations/src/app/open-close.component.css
@@ -1,5 +1,6 @@
 :host {
   display: block;
+  margin-top: 1rem;
 }
 
 .open-close-container {
diff --git a/aio/content/examples/animations/src/app/open-close.component.html b/aio/content/examples/animations/src/app/open-close.component.html
index 5d0a615f3f..f6722c365f 100644
--- a/aio/content/examples/animations/src/app/open-close.component.html
+++ b/aio/content/examples/animations/src/app/open-close.component.html
@@ -1,10 +1,8 @@
-<nav>
-  <button (click)="toggle()">Toggle Open/Close</button>
-</nav>
+<button (click)="toggle()">Toggle Open/Close</button>
 
 <div [@openClose]="isOpen ? 'open' : 'closed'"
   (@openClose.start)="onAnimationEvent($event)"
   (@openClose.done)="onAnimationEvent($event)"
-  class="open-close-container">  
+  class="open-close-container">
   <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
 </div>
diff --git a/aio/content/examples/animations/src/app/open-close.component.ts b/aio/content/examples/animations/src/app/open-close.component.ts
index e62abe5601..4b04f7088d 100644
--- a/aio/content/examples/animations/src/app/open-close.component.ts
+++ b/aio/content/examples/animations/src/app/open-close.component.ts
@@ -20,8 +20,8 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
 // #docregion state2
       state('closed', style({
         height: '100px',
-        opacity: 0.5,
-        backgroundColor: 'green'
+        opacity: 0.8,
+        backgroundColor: '#c6ecff'
       })),
 // #enddocregion state2, trigger-wildcard1
 // #docregion transition1
diff --git a/aio/content/examples/animations/src/app/status-slider.component.ts b/aio/content/examples/animations/src/app/status-slider.component.ts
index fa39b9e688..88125cb75f 100644
--- a/aio/content/examples/animations/src/app/status-slider.component.ts
+++ b/aio/content/examples/animations/src/app/status-slider.component.ts
@@ -8,19 +8,19 @@ import { trigger, transition, state, animate, style, keyframes } from '@angular/
   animations: [
     trigger('slideStatus', [
       state('inactive', style({ backgroundColor: 'blue' })),
-      state('active', style({ backgroundColor: 'orange' })),
+      state('active', style({ backgroundColor: '#754600' })),
 
 // #docregion keyframesWithOffsets
       transition('* => active', [
         animate('2s', keyframes([
           style({ backgroundColor: 'blue', offset: 0}),
           style({ backgroundColor: 'red', offset: 0.8}),
-          style({ backgroundColor: 'orange', offset: 1.0})
+          style({ backgroundColor: '#754600', offset: 1.0})
         ])),
       ]),
       transition('* => inactive', [
         animate('2s', keyframes([
-          style({ backgroundColor: 'orange', offset: 0}),
+          style({ backgroundColor: '#754600', offset: 0}),
           style({ backgroundColor: 'red', offset: 0.2}),
           style({ backgroundColor: 'blue', offset: 1.0})
         ]))
diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md
index 401892699c..c70195143c 100644
--- a/aio/content/guide/animations.md
+++ b/aio/content/guide/animations.md
@@ -1,6 +1,6 @@
 # Introduction to Angular animations
 
-Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren't just cosmetic. Animations can improve your app and user experience in a number of ways:
+Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren't just cosmetic. Animations can improve your application and user experience in a number of ways:
 
 * Without animations, web page transitions can seem abrupt and jarring.
 
@@ -17,7 +17,7 @@ Angular's animation system is built on CSS functionality, which means you can an
 
 This guide covers the basic Angular animation features to get you started on adding Angular animations to your project.
 
-The features described in this guide &mdash; and the more advanced features described in the related Angular animations guides &mdash; are demonstrated in an example app available as a <live-example></live-example>.
+The features described in this guide &mdash; and the more advanced features described in the related Angular animations guides &mdash; are demonstrated in an example application available as a <live-example></live-example>.
 
 #### Prerequisites
 
@@ -63,16 +63,12 @@ In the component file, add a metadata property called `animations:` within the `
 <code-example path="animations/src/app/app.component.ts" header="src/app/app.component.ts" region="decorator" language="typescript">
 </code-example>
 
-## Animating a simple transition
+## Animating a transition
 
-Let's animate a simple transition that changes a single HTML element from one state to another. For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. When the button is in the `open` state, it's visible and yellow. When it's in the `closed` state, it's transparent and green.
+Let's animate a transition that changes a single HTML element from one state to another. For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. When the button is in the `open` state, it's visible and yellow. When it's the `closed` state, it's translucent and blue.
 
 In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.
 
-<div class="lightbox">
-  <img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
-</div>
-
 <div class="alert is-helpful">
 
   Let's create a new `open-close` component to animate with simple transitions.
@@ -95,7 +91,7 @@ Let's see how Angular's `state()` function works with the `style⁣­(⁠)` func
 <code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="state1" language="typescript">
 </code-example>
 
-In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.5, and a background color of green.
+In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.7, and a background color of blue.
 
 <code-example path="animations/src/app/open-close.component.ts" header="src/app/open-close.component.ts" region="state2" language="typescript">
 </code-example>
@@ -117,7 +113,7 @@ The `timings` parameter takes a string defined in three parts.
 
 >`animate ('duration delay easing')`
 
-The first part, `duration`, is required. The duration can be expressed in milliseconds as a simple number without quotes, or in seconds with quotes and a time specifier. For example, a duration of a tenth of a second can be expressed as follows:
+The first part, `duration`, is required. The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier. For example, a duration of a tenth of a second can be expressed as follows:
 
 * As a plain number, in milliseconds: `100`
 
@@ -177,10 +173,6 @@ The `trigger()` function describes the property name to watch for changes. When
 
 In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions.
 
-<div class="lightbox">
-  <img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
-</div>
-
 <div class="alert is-helpful">
 
 **Note:** Within each `trigger()` function call, an element can only be in one state at any given time. However, it's possible for multiple triggers to be active at once.
@@ -239,7 +231,7 @@ region="trigger">
 
 ### Summary
 
-You learned to add animation to a simple 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 `state()` along with `animate()` for the timing.
 
 You can 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/images/guide/animations/open-closed.png b/aio/content/images/guide/animations/open-closed.png
deleted file mode 100644
index 7f4aff97da..0000000000
Binary files a/aio/content/images/guide/animations/open-closed.png and /dev/null differ
diff --git a/aio/content/images/guide/animations/triggering-the-animation.png b/aio/content/images/guide/animations/triggering-the-animation.png
deleted file mode 100644
index cbaa7929e7..0000000000
Binary files a/aio/content/images/guide/animations/triggering-the-animation.png and /dev/null differ