diff --git a/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx
index 19a703b597..17fde1d62f 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxButton.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
 import { InboxButton } from "./InboxButton";
 
 const meta: Meta<typeof InboxButton> = {
@@ -16,3 +17,32 @@ export const Unread: Story = {
 		unreadCount: 3,
 	},
 };
+
+export const BadgeTransition: Story = {
+	render: function BadgeTransitionStory() {
+		const [count, setCount] = useState(0);
+
+		return (
+			<div className="flex items-center gap-4">
+				<InboxButton unreadCount={count} />
+				<div className="flex gap-2">
+					<button
+						type="button"
+						className="rounded border border-solid border-border px-3 py-1 text-sm bg-surface-primary text-content-primary"
+						onClick={() => setCount((c) => c + 1)}
+					>
+						Add notification
+					</button>
+					<button
+						type="button"
+						className="rounded border border-solid border-border px-3 py-1 text-sm bg-surface-primary text-content-primary"
+						onClick={() => setCount(0)}
+					>
+						Clear all
+					</button>
+				</div>
+				<span className="text-sm text-content-secondary">Count: {count}</span>
+			</div>
+		);
+	},
+};
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
index 387c66160d..e3bc95e667 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxButton.tsx
@@ -17,11 +17,12 @@ export const InboxButton: React.FC<InboxButtonProps> = ({
 			{unreadCount > 0 && (
 				<UnreadBadge
 					count={unreadCount}
-					className={cn([
+					className={cn(
 						"[--offset:calc(var(--unread-badge-size)/2)]",
 						"absolute top-0 right-0 -mr-[--offset] -mt-[--offset]",
-						"animate-in fade-in zoom-in duration-200",
-					])}
+						"origin-center animate-in zoom-in-0 fade-in-0 duration-500",
+						"[animation-timing-function:cubic-bezier(0.34,1.36,0.64,1)]",
+					)}
 				/>
 			)}
 		</Button>