Search Bar Animation

AI Overview: Search Bar Animation

This project features a creative, highly animated search bar that transforms from a simple magnifying glass icon into a full-width input field. The primary goal is to enhance user experience through a seamless transition where the "handle" of the magnifying glass physically moves and morphs into the blinking text cursor (caret) when the user clicks to type.

The project is built using a minimal HTML structure and sophisticated CSS animations. The search bar starts as a small circle with a thick border, while a separate span element is styled and positioned to look like the handle of a magnifying glass. By using CSS pseudo-classes like :focus and :valid, the search bar automatically expands and stays open as long as the user is interacting with it or has entered text.

The logic relies heavily on the handleToCaret keyframe animation. When the input is activated, this animation changes the handle's rotation, color, and position, "jumping" it into the input box. Meanwhile, the input field transitions its width and border-radius to shift from a circle to a rounded rectangle. This creates a polished, fluid motion that makes the interface feel responsive and modern.

Key Code Snippets

1. Minimal HTML Structure
The search bar uses a standard input and a specific span to act as the animated handle/caret.

<form>
  <label for="search">Search</label>
  <input id="search" type="search" pattern=".*\S.*" required>
  <span class="caret"></span>
</form>

2. Initial Icon Shape
The input starts as a small circle by setting the border-radius to 50% and giving it a fixed width and height.

input {
	background: transparent;
	border-radius: 50%;
	box-shadow: 0 0 0 0.25em inset;
	width: 2em;
	height: 2em;
}

3. The Transformation Trigger
When the input is focused or contains valid text, it expands to its full width and changes shape.

input:focus,
input:valid {
	background: var(--input);
	border-radius: 0.25em;
	box-shadow: none;
	width: 100%;
	height: 3em;
}

4. Complex Caret Animation
This keyframe sequence handles the "jump" of the magnifying glass handle, rotating and moving it into the input field.

@keyframes handleToCaret {
	from {
		transform: translate(0, -1em) rotate(-45deg) translate(0, 0.875em);
	}
	25% {
		transform: translate(0, -1em) rotate(-180deg) translate(0, 0.875em);
	}
	to {
		transform: translate(0, -1em) rotate(-180deg) translate(7.5em, -0.25em);
	}
}