diff --git a/chrome/browser/chromeos/lock_screen_apps/state_controller.cc b/chrome/browser/chromeos/lock_screen_apps/state_controller.cc
index 5b3854192b46c..b09f9eb9a40cb 100644
--- a/chrome/browser/chromeos/lock_screen_apps/state_controller.cc
+++ b/chrome/browser/chromeos/lock_screen_apps/state_controller.cc
@@ -7,6 +7,7 @@
 #include <utility>
 
 #include "ash/public/interfaces/constants.mojom.h"
+#include "ash/wm/window_animations.h"
 #include "base/base64.h"
 #include "base/bind.h"
 #include "base/command_line.h"
@@ -488,8 +489,14 @@ void StateController::ResetNoteTakingWindowAndMoveToNextState(
     if (focus_cycler_delegate_)
       focus_cycler_delegate_->UnregisterLockScreenAppFocusHandler();
 
-    if (close_window && note_app_window_->GetBaseWindow())
+    if (close_window && note_app_window_->GetBaseWindow()) {
+      // Whenever we close the window we want to immediately hide it without
+      // animating, as the underlying UI implements a special animation. If we
+      // also animate the window the animations will conflict.
+      ::wm::SetWindowVisibilityAnimationTransition(
+          note_app_window_->GetNativeWindow(), ::wm::ANIMATE_NONE);
       note_app_window_->GetBaseWindow()->Close();
+    }
     note_app_window_ = nullptr;
   }
 
diff --git a/chrome/browser/resources/chromeos/login/md_top_header_bar.css b/chrome/browser/resources/chromeos/login/md_top_header_bar.css
index 191413130c3c2..fb88a5bcf03e8 100644
--- a/chrome/browser/resources/chromeos/login/md_top_header_bar.css
+++ b/chrome/browser/resources/chromeos/login/md_top_header_bar.css
@@ -57,14 +57,10 @@
   pointer-events: none;
 }
 
-.new-note-action:not(.new-note-action-short-transition) {
+.new-note-action {
   transition: all 300ms;
 }
 
-.new-note-action-short-transition {
-  transition: all 5ms;
-}
-
 html[dir=rtl] .new-note-action {
   border-radius: 0 0 44px 0;
 }
@@ -83,7 +79,6 @@ html[dir=rtl] .new-note-action:focus {
 }
 
 .new-note-action-container-activated > .new-note-action {
-  background-color: #000;
   bottom: auto;
   left: auto;
   position: absolute;
diff --git a/chrome/browser/resources/chromeos/login/md_top_header_bar.js b/chrome/browser/resources/chromeos/login/md_top_header_bar.js
index 3a11efa125e29..f96902192ae97 100644
--- a/chrome/browser/resources/chromeos/login/md_top_header_bar.js
+++ b/chrome/browser/resources/chromeos/login/md_top_header_bar.js
@@ -351,8 +351,9 @@ cr.define('login', function() {
       if (this.lockScreenAppsState_ == state)
         return;
 
+      var previousState = this.lockScreenAppsState_;
       this.lockScreenAppsState_ = state;
-      this.updateUi_();
+      this.updateUi_(previousState);
     },
 
     /** override */
@@ -367,25 +368,10 @@ cr.define('login', function() {
     },
 
     /**
+     * @param {!LockScreenAppsState} previousState
      * @private
      */
-    updateUi_: function() {
-      // Shorten transition duration when moving to available state, in
-      // particular when moving from foreground state - when moving from
-      // foreground state container gets cropped to top right corner
-      // immediately, while action element is updated from full screen with
-      // a transition. If the transition is too long, the action would be
-      // displayed as full square for a fraction of a second, which can look
-      // janky.
-      if (this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.AVAILABLE) {
-        $('new-note-action')
-            .classList.toggle('new-note-action-short-transition', true);
-        this.runOnNoteActionTransitionEnd_(function() {
-          $('new-note-action')
-              .classList.toggle('new-note-action-short-transition', false);
-        });
-      }
-
+    updateUi_: function(previousState) {
       this.swipeDetector_.setEnabled(
           this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.AVAILABLE);
 
@@ -413,14 +399,24 @@ cr.define('login', function() {
           .classList.toggle('new-note-action-above-login-header', false);
 
       if (this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.FOREGROUND) {
-        // Reset properties that might have been set as a result of activating
-        // new note action.
+        var transitionOut =
+            previousState == LOCK_SCREEN_APPS_STATE.FOREGROUND &&
+            this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.AVAILABLE;
         $('new-note-action-container')
-            .classList.toggle('new-note-action-container-activated', false);
+            .classList.toggle(
+                'new-note-action-container-activated', transitionOut);
+        if (transitionOut) {
+          this.runOnNoteActionTransitionEnd_(function() {
+            $('new-note-action-container')
+                .classList.toggle('new-note-action-container-activated', false);
+          });
+        }
+
         $('new-note-action').style.removeProperty('border-bottom-left-radius');
         $('new-note-action').style.removeProperty('border-bottom-right-radius');
         $('new-note-action').style.removeProperty('height');
         $('new-note-action').style.removeProperty('width');
+        $('new-note-action').style.removeProperty('background-color');
       }
     },
 
@@ -498,6 +494,7 @@ cr.define('login', function() {
       newNoteAction.style.setProperty(
           isRTL() ? 'border-bottom-right-radius' : 'border-bottom-left-radius',
           targetSize);
+      newNoteAction.style.setProperty('background-color', '#000');
     },
 
     /**