diff --git a/plugins/woocommerce-admin/client/header/activity-panel/index.js b/plugins/woocommerce-admin/client/header/activity-panel/index.js
index 8d46901cce4..2019357d836 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/index.js
+++ b/plugins/woocommerce-admin/client/header/activity-panel/index.js
@@ -200,7 +200,7 @@ class ActivityPanel extends Component {
 	renderTab( tab, i ) {
 		const { currentTab, isPanelOpen } = this.state;
 		const className = classnames( 'woocommerce-layout__activity-panel-tab', {
-			'is-active': tab.name === currentTab,
+			'is-active': isPanelOpen && tab.name === currentTab,
 			'has-unread': tab.unread,
 		} );
 
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/style.scss b/plugins/woocommerce-admin/client/header/activity-panel/style.scss
index 8b773fda83a..d2366fa805b 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/style.scss
+++ b/plugins/woocommerce-admin/client/header/activity-panel/style.scss
@@ -73,18 +73,27 @@
 		font-size: 11px;
 		height: $header-height;
 
+		&::before {
+			background-color: $woocommerce;
+			bottom: 0;
+			content: '';
+			height: 0;
+			opacity: 0;
+			transition-property: height, opacity;
+			transition-duration: 300ms;
+			transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+			left: 0;
+			position: absolute;
+			right: 0;
+		}
+
 		&.is-active {
 			color: $core-grey-dark-700;
 			box-shadow: none;
 
 			&::before {
-				background-color: $woocommerce;
-				bottom: 0;
-				content: '';
 				height: 3px;
-				left: 0;
-				position: absolute;
-				right: 0;
+				opacity: 1;
 			}
 		}