diff --git a/data/theme/gnome-shell-sass/widgets/_entries.scss b/data/theme/gnome-shell-sass/widgets/_entries.scss
index 70875b085..0a43e86f3 100644
--- a/data/theme/gnome-shell-sass/widgets/_entries.scss
+++ b/data/theme/gnome-shell-sass/widgets/_entries.scss
@@ -25,9 +25,3 @@ StEntry {
     color: transparentize($fg_color, 0.3);
   }
 }
-
-.caps-lock-warning-label {
-  padding-left: 6.2em;
-  @include fontsize($base_font_size - 1);
-  color: $warning_color;
-}
diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 5d60dbde1..f05436dc5 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -56,4 +56,12 @@
 
 
 // Hidden
-.hidden { color: rgba(0,0,0,0);}
\ No newline at end of file
+.hidden { color: rgba(0,0,0,0);}
+
+// Caps-lock warning
+.caps-lock-warning-label {
+  padding-bottom: 8px;
+  padding-left: 6.2em;
+  @include fontsize($base_font_size - 1);
+  color: $warning_color;
+}
diff --git a/js/ui/shellEntry.js b/js/ui/shellEntry.js
index f8f2f12fd..0488d70d0 100644
--- a/js/ui/shellEntry.js
+++ b/js/ui/shellEntry.js
@@ -161,31 +161,46 @@ class CapsLockWarning extends St.Label {
 
         this.text = _('Caps lock is on.');
 
+        this.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+        this.clutter_text.line_wrap = true;
+
         this._keymap = Clutter.get_default_backend().get_keymap();
 
         this.connect('notify::mapped', () => {
             if (this.is_mapped()) {
                 this._stateChangedId = this._keymap.connect('state-changed',
-                    this._updateCapsLockWarningOpacity.bind(this));
+                    () => this._sync(true));
             } else {
                 this._keymap.disconnect(this._stateChangedId);
                 this._stateChangedId = 0;
             }
 
-            this._updateCapsLockWarningOpacity();
+            this._sync(false);
         });
 
         this.connect('destroy', () => {
-            if (this._stateChangedId > 0)
+            if (this._stateChangedId)
                 this._keymap.disconnect(this._stateChangedId);
         });
-
-        this.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-        this.clutter_text.line_wrap = true;
     }
 
-    _updateCapsLockWarningOpacity() {
+    _sync(animate) {
         let capsLockOn = this._keymap.get_caps_lock_state();
-        this.opacity = capsLockOn ? 255 : 0;
+
+        this.remove_all_transitions();
+
+        this.natural_height_set = false;
+        let [, height] = this.get_preferred_height(-1);
+        this.natural_height_set = true;
+
+        this.ease({
+            height: capsLockOn ? height : 0,
+            opacity: capsLockOn ? 255 : 0,
+            duration: animate ? 200 : 0,
+            onComplete: () => {
+                if (capsLockOn)
+                    this.height = -1;
+            },
+        });
     }
 });