CSS로 애니메이션 검색 폼 구현하기
CSS의 transition 속성을 활용하면 별도의 JavaScript 없이도 검색 입력창에 부드러운 애니메이션 효과를 추가할 수 있습니다. 아래 예제는 검색창을 클릭(포커스)했을 때 입력창의 너비가 자연스럽게 확장되는 애니메이션 검색 폼입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
input[type=text] {
width: 170px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<h1>애니메이션 검색 폼 예제</h1>
<form>
검색:
<input type="text" name="search" placeholder="여기에 검색하세요...">
</form>
</body>
</html>코드 설명
- transition: width 0.4s ease-in-out; — 입력창의 너비가 변경될 때 0.4초 동안 부드럽게 변화하도록 설정합니다.
- :focus 선택자 — 사용자가 입력창을 클릭하거나 탭으로 포커스를 이동하면 width가 100%로 확장됩니다.
- box-sizing: border-box; — 패딩과 테두리가 포함된 크기를 유지해 레이아웃이 깨지지 않도록 합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
검색 박스를 클릭하면 입력창이 아래와 같이 넓어집니다.
마무리
이처럼 CSS의 transition과 :focus 가상 클래스만으로도 간단하고 세련된 애니메이션 검색 폼을 만들 수 있습니다. 필요에 따라 전환 시간을 조정하거나 배경색, 테두리 스타일을 추가해 더욱 풍부한 사용자 경험을 제공할 수 있습니다.