Cách tạo form tìm kiếm có animation (animated search form) với CSS

Giới thiệu

Animated search form thu hút sự chú ý và tiết kiệm không gian: input ban đầu thu gọn (chỉ thấy icon), khi click/focus thì mở rộng ra. Chỉ dùng CSS transition trên width.

Ví dụ hoàn chỉnh - Expanding Search Animation

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Search Form</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f5f5f5; padding: 60px 20px; }
    .search-container { max-width: 400px; margin: 0 auto; }
    .animated-search {
      position: relative;
      display: flex;
      align-items: center;
    }
    .search-input {
      width: 56px;
      height: 56px;
      padding: 0 60px 0 20px;
      font-size: 16px;
      border: none;
      border-radius: 50px;
      background: #fff;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
      color: #333;
    }
    .search-input::placeholder { color: transparent; transition: color 0.2s 0.2s; }
    .search-input:focus {
      width: 320px;
      padding-left: 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    }
    .search-input:focus::placeholder { color: #aaa; }
    .search-btn {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: all 0.2s;
      z-index: 1;
    }
    .search-btn:hover { box-shadow: 0 4px 12px rgba(102,126,234,0.4); transform: translateY(-50%) scale(1.05); }
    .search-label {
      position: absolute;
      left: 20px;
      color: #aaa;
      font-size: 16px;
      pointer-events: none;
      transition: all 0.2s;
    }
    .search-input:focus + .search-btn + .search-label,
    .search-input:not(:placeholder-shown) + .search-btn + .search-label {
      opacity: 0; transform: translateY(-10px);
    }
  </style>
</head>
<body>
  <div class="search-container">
    <h1 style="text-align:center; margin-bottom:30px">Animated Search Form</h1>
    <form class="animated-search" role="search">
      <input type="search" class="search-input" placeholder="Tìm kiếm..." aria-label="Tìm kiếm" autocomplete="off">
      <button type="submit" class="search-btn" aria-label="Tìm kiếm"><i class="fas fa-search"></i></button>
      <span class="search-label">Tìm kiếm...</span>
    </form>
    <p style="text-align:center; margin-top:20px; color:#666">Click vào icon kính lúp để mở rộng ô tìm kiếm</p>
  </div>
</body>
</html>

Cơ chế Animation

• Width transition: Từ 56px (chỉ chứa nút) → 320px (full input).
• cubic-bezier(0.4, 0, 0.2, 1): Easing tự nhiên (Material Design).
• Placeholder ẩn/hiện: color: transparent → color: #aaa với delay.
• Label float: Placeholder text riêng (.search-label) trượt lên/mờ khi focus.

Biến thể: Slide-in từ phải

.slide-search { position: relative; overflow: hidden; width: 56px; transition: width 0.4s; }
.slide-search.active { width: 320px; }
.slide-search input {
  position: absolute; right: 0; top: 0; bottom: 0; width: 100%;
  padding: 0 60px 0 20px; border: none; border-radius: 50px;
  background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.slide-search.active input { transform: translateX(0); }

Biến thể: Morphing Shape (Vuông → Tròn)

.morph-search input {
  border-radius: 8px; transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.morph-search input:focus { border-radius: 50px; }

Performance Tips

• Chỉ animate width, padding, transform, opacity - các thuộc tính không trigger layout/repaint.
• Tránh animate left, margin, border-radius (trên một số trình duyệt).
• Dùng will-change: width, transform nếu animation lag.

Khi nào dùng Animated Search?

• Header có ít không gian, search không phải hành động chính.
• Dashboard, admin panel, app web.
• Không dùng cho trang landing page marketing (search cần hiển thị rõ ràng).