diff --git a/demos/text-field.html b/demos/text-field.html
index 991717d70fe..95b84903e00 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -348,7 +348,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
         </div>
         <div>
           <input id="required-leading-trailing" type="checkbox">
-          <label for="required-leading-trailing">Required</label>
+          <label for="required-leading-trailing">Required and must be at least 8 characters</label>
         </div>
       </section>
 
@@ -501,6 +501,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfIconContainer.querySelectorAll('.mdc-text-field__input')
               .forEach(function(input) {
                 input.required = evt.target.checked;
+                input.pattern = evt.target.checked ? '.{8,}' : '.*';
               });
         });
       });
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 3afc628b672..329a577b0d7 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -46,28 +46,37 @@
   }
 }
 
-@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $scale: .75) {
+@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $positionX: 0%, $scale: .75) {
   @keyframes invalid-shake-float-above-#{$modifier} {
     0% {
-      transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale});
+      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
     }
 
     33% {
       animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
-      transform: translateX(5px) translateY(-#{$positionY}) scale(#{$scale});
+      transform: translateX(calc(4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
     }
 
     66% {
       animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
-      transform: translateX(-5px) translateY(-#{$positionY}) scale(#{$scale});
+      transform: translateX(calc(-4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
     }
 
     100% {
-      transform: translateX(0) translateY(-#{$positionY}) scale(#{$scale});
+      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
     }
   }
 }
 
+@include mdc-text-field-invalid-label-shake_keyframes_(standard, 100%);
+@include mdc-text-field-invalid-label-shake-keyframes_(box, 50%);
+@include mdc-text-field-invalid-label-shake-keyframes_(box-dense, 90%, 0%, .923);
+@include mdc-text-field-invalid-label-shake_keyframes_(outlined, 130%);
+@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, 145%, 0%, .923);
+@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon, 130%, 27%);
+@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon-dense, 145%, 25%, .923);
+@include mdc-text-field-invalid-label-shake-keyframes_(textarea, 50%, 0%, .923);
+
 @mixin mdc-text-field-ink-color($color) {
   &:not(.mdc-text-field--disabled) {
     @include mdc-text-field-ink-color_($color);
@@ -210,7 +219,7 @@
   }
 
   .mdc-text-field__label--float-above {
-    transform: translateY(calc(-122% - 2px)) scale(.923);
+    transform: translateY(-145%) scale(.923);
   }
 
   .mdc-text-field__label--float-above.mdc-text-field__label--shake {
@@ -250,7 +259,7 @@
   }
 
   .mdc-text-field__label--float-above {
-    transform: scale(.75) translateY(-170%);
+    transform: translateY(-130%) scale(.75);
   }
 
   .mdc-text-field__label--float-above.mdc-text-field__label--shake {
@@ -313,7 +322,11 @@
   }
 
   .mdc-text-field__label--float-above {
-    transform: translateY(calc(-75% - 2px)) scale(.923, .923);
+    transform: translateY(-90%) scale(.923);
+  }
+
+  .mdc-text-field__label--float-above.mdc-text-field__label--shake {
+    animation: invalid-shake-float-above-box-dense 250ms 1;
   }
 }
 
@@ -399,7 +412,9 @@
 
     top: $label-offset-y;
     bottom: auto;
-    padding: 8px 16px;
+    margin-top: 2px;
+    margin-left: 8px;
+    padding: 8px;
     background-color: $mdc-textarea-light-background;
     line-height: 1.15;
 
@@ -412,7 +427,11 @@
     // Translate above the top of the input, and compensate for the amount of offset needed
     // to position the label within the bounds of the inset padding.
     // Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
-    transform: translateY(-50%) scale(.923, .923);
+    transform: translateY(-50%) scale(.923);
+  }
+
+  .mdc-text-field__label--float-above.mdc-text-field__label--shake {
+    animation: invalid-shake-float-above-textarea 250ms 1;
   }
 
   &.mdc-text-field--disabled {
diff --git a/packages/mdc-textfield/label/mdc-text-field-label.scss b/packages/mdc-textfield/label/mdc-text-field-label.scss
index 546028e4920..9a9195cdd43 100644
--- a/packages/mdc-textfield/label/mdc-text-field-label.scss
+++ b/packages/mdc-textfield/label/mdc-text-field-label.scss
@@ -14,14 +14,12 @@
 // limitations under the License.
 //
 
+@import "../mixins";
 @import "../variables";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
 
-@include mdc-text-field-invalid-label-shake_keyframes_(standard, 100%);
-@include mdc-text-field-invalid-label-shake_keyframes_(box, 50%);
-
 // postcss-bem-linter: define text-field-label
 .mdc-text-field__label {
   position: absolute;
@@ -40,7 +38,7 @@
   // stylelint-enable plugin/selector-bem-pattern
 
   &--float-above {
-    transform: translateY(-100%) scale(.75, .75);
+    transform: translateY(-100%) scale(.75);
     cursor: auto;
   }
 }
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 722eee949d8..590bbbcdaef 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -30,10 +30,6 @@
 @import "./icon/mdc-text-field-icon";
 @import "./label/mdc-text-field-label";
 @import "./outline/mdc-text-field-outline";
-@include mdc-text-field-invalid-label-shake-keyframes_(standard, 100%);
-@include mdc-text-field-invalid-label-shake-keyframes_(box, 50%);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined, 130%);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, 138%, .923);
 
 // postcss-bem-linter: define text-field
 
@@ -110,7 +106,7 @@
   // Move label when text-field gets autofilled in Chrome
   // stylelint-disable plugin/selector-bem-pattern
   &:-webkit-autofill + .mdc-text-field__label {
-    transform: translateY(-100%) scale(.75, .75);
+    transform: translateY(-100%) scale(.75);
     cursor: auto;
   }
   // stylelint-enable plugin/selector-bem-pattern
@@ -183,11 +179,14 @@
     @include mdc-theme-dark(".mdc-text-field") {
       @include mdc-theme-prop(color, text-secondary-on-dark);
     }
+
+    &--float-above {
+      transform: translateY(-50%) scale(.75);
+    }
   }
 
   .mdc-text-field__label--float-above {
-    animation: invalid-shake-float-above-box 250ms 1;
-    transform: translateY(-50%) scale(.75, .75);
+    transform: translateY(-50%) scale(.75);
   }
 
   .mdc-text-field__label--float-above.mdc-text-field__label--shake {
@@ -220,10 +219,14 @@
   // stylelint-disable plugin/selector-bem-pattern
   &.mdc-text-field--outlined {
     .mdc-text-field__label--float-above {
-      transform: scale(.75) translateX(-36%) translateY(-170%);
+      transform: translateX(-27%) translateY(-130%) scale(.75);
 
       @include mdc-rtl {
-        transform: scale(.75) translateX(36%) translateY(-170%);
+        transform: translateX(27%) translateY(-130%) scale(.75);
+      }
+
+      &.mdc-text-field__label--shake {
+        animation: invalid-shake-float-above-outlined-leading-icon 250ms 1;
       }
     }
 
@@ -235,6 +238,11 @@
         @include mdc-rtl {
           transform: translateX(25%) translateY(-145%) scale(.923);
         }
+
+        // stylelint-disable-next-line selector-max-specificity
+        &.mdc-text-field__label--shake {
+          animation: invalid-shake-float-above-outlined-leading-icon-dense 250ms 1;
+        }
         // stylelint-enable max-nesting-depth
       }
     }
@@ -312,7 +320,7 @@
 
   .mdc-text-field__label--float-above {
     // NOTE: This is an eyeball'd approximation of what's in the mocks.
-    transform: translateY(calc(-100% - 2px)) scale(.923, .923);
+    transform: translateY(-110%) scale(.923);
   }
 }