🐛 Fix glitchy kangaroo bounce animation on welcome screen (#10035)

The kangaroo logo on the welcome screen had a visual glitch where it would instantly jump to the top position when hovering, instead of smoothly starting the bounce from its resting position.

Changes:
- Added custom smooth-bounce keyframe animation in index.css that explicitly starts from translateY(0)
- Updated RooHero component to use hover state tracking with the new animation
- Removed Tailwind's animate-bounce class which was causing the glitch

The animation now smoothly bounces from the resting position without any jarring visual jumps.

Author: objectiveSee

webview-ui/src/components/welcome/RooHero.tsx

@@ -5,9 +5,13 @@ const RooHero = () => {
 		const w = window as any
 		return w.IMAGES_BASE_URI || ""
 	})
+	const [isHovered, setIsHovered] = useState(false)
 
 	return (
-		<div className="mb-4 relative forced-color-adjust-none group flex flex-col items-center w-30 pt-4 overflow-clip">
+		<div
+			className="mb-4 relative forced-color-adjust-none group flex flex-col items-center w-30 pt-4 overflow-clip"
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => setIsHovered(false)}>
 			<div
 				style={{
 					backgroundColor: "var(--vscode-foreground)",
@@ -17,8 +21,9 @@ const RooHero = () => {
 					maskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
 					maskRepeat: "no-repeat",
 					maskSize: "contain",
+					animation: isHovered ? "smooth-bounce 1s ease-in-out infinite" : "none",
 				}}
-				className="z-5 mr-auto group-hover:animate-bounce translate-y-0 transition-transform duration-500">
+					className="z-5 mr-auto translate-y-0 transition-transform duration-500">
 				<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
 			</div>
 			<div

webview-ui/src/index.css

@@ -205,6 +205,29 @@
 	.history-item-highlight {
 		@apply underline;
 	}
+
+	/* Custom smooth bounce animation for Roo hero */
+	@keyframes smooth-bounce {
+		0% {
+			transform: translateY(0);
+		}
+		25% {
+			transform: translateY(-25%);
+		}
+		50% {
+			transform: translateY(0);
+		}
+		75% {
+			transform: translateY(-12.5%);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	.animate-smooth-bounce {
+		animation: smooth-bounce 1s ease-in-out infinite;
+	}
 }
 
 /* Form Element Focus States */