diff --git a/src/style.css b/src/style.css
index 3bcdbd0..ac9bd24 100644
--- a/src/style.css
+++ b/src/style.css
@@ -82,6 +82,17 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.gs-plus-icon {
+  opacity: 0;
+  transform: scale(0.7);
+  transition: opacity 500ms cubic-bezier(0.4,0,0.2,1), transform 500ms cubic-bezier(0.4,0,0.2,1);
+}
+
+.gs-plus-icon.gs-plus-icon--visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
diff --git a/src/ui/header-utils.ts b/src/ui/header-utils.ts
index c1e266b..175b2e2 100644
--- a/src/ui/header-utils.ts
+++ b/src/ui/header-utils.ts
@@ -9,6 +9,8 @@ const PLUS_ICON_CLASS = 'gs-plus-icon';
 const HEADER_WITH_ICON_CLASS = 'gs-has-plus-icon';
 const PLUS_ICON_ACTIVE_CLASS = 'gs-plus-icon--active';
 
+const SHORT_TIME = 10
+
 export function injectPlusIcons(table: HTMLTableElement, columnTypes: ColumnType[]): void {
   // Remove any existing plus icons first
   removePlusIcons(table);
@@ -105,6 +107,12 @@ function addPlusIconToHeader(header: HTMLTableCellElement, type: HeaderType): vo
   plusIcon.textContent = '+';
   plusIcon.style.marginLeft = '4px';
   plusIcon.style.cursor = 'pointer';
+
+  // Animate appearance
+  // Add the visible class after a tick to trigger the transition
+  setTimeout(() => {
+    plusIcon.classList.add('gs-plus-icon--visible');
+  }, SHORT_TIME);
   
   // Add click handler
   plusIcon.addEventListener('click', (e) => {