GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

CSS 입력창 검색창 포커스 애니메이션 9종 — 한 줄 복붙으로

· Godrich · 9종 · 10분 읽기

피드백SCSSCSS만바닐라 JS호버폼·입력

CSS 입력창 애니메이션은 클릭하기 전·클릭한 순간·값을 다 채운 뒤까지 브라우저가 이미 쥐고 있는 :focus :focus-within :placeholder-shown :valid :invalid 상태를 그대로 움직임으로 옮기는 작업입니다.

플로팅 라벨01 input-search-focus-floating-label 밑줄 확장 포커스02 input-search-focus-underline-grow :has(:focus) 글로우03 input-search-focus-has-focus-glow 검색창 확장04 input-search-focus-search-expand 플레이스홀더 슬라이드05 input-search-focus-placeholder-slide 오류 흔들림06 input-search-focus-error-shake 커스텀 셀렉트 오픈07 input-search-focus-select-custom-open 글자 수 카운트08 input-search-focus-char-count 비밀번호 눈 토글09 input-search-focus-password-eye-toggle

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개 전부 진짜 <input>을 썼고, 화려한 순이 아니라 입력창이 필요로 하는 판정이 늘어나는 순서로 놓았습니다. 01~05는 :focus :focus-within :placeholder-shown 만으로 끝나고, 06은 브라우저의 HTML5 유효성 검사(:valid/:invalid)가 판정을 대신하며, 07~09는 클릭이나 타이핑이 상태를 바꾸는 자리라 자바스크립트가 셀렉트 열기·글자 수 세기·눈 아이콘 토글처럼 CSS 상태만으로는 안 되는 세 곳에만 최소로 들어갑니다. 여기 아홉 개는 사용자가 입력창을 건드렸을 때만 반응하지만, 건드리지 않아도 계속 도는 @keyframes 쪽 아홉 개는 CSS 키프레임 애니메이션 9종에 따로 있습니다. 08 글자 수 카운트나 09 눈 토글 옆에 붙는 아이콘 자체를 선 단위로 그려 움직이고 싶다면 CSS 아이콘 애니메이션 9종의 SVG 방식이 이 아홉 개와 바로 맞물립니다.

01플로팅 라벨

라벨이 떠오르는 조건

input 뒤에 형제로 둔 label이 input의 :focus이거나 값이 있어서 :not(:placeholder-shown)이면 왼쪽 위로 떠오르며 작아집니다.

라벨이 목표 지점을 지나쳤다가 되돌아오는 스프링 오버슛(cubic-bezier(.3, 1.6, .4, 1))이 붙어 있고, 같은 순간 입력창 테두리 바깥으로 번지는 radial 글로우 확산이 한 번 지나갑니다.

플로팅 라벨
새 창에서 열기

01 · 플로팅 라벨 — 측정 누적면적 7.982% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

:placeholder-showntransform scale220ms

좁은 폼에서 줄 하나 아끼기

플레이스홀더와 라벨을 하나로 합쳐 좁은 폼에서 줄 하나를 아낍니다.

.fl__label {
  position: absolute;
  left: $sp-4;
  top: 50%;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  transition: transform $duration $easing, color $duration $easing;
}

.fl__input:focus ~ .fl__label,
.fl__input:not(:placeholder-shown) ~ .fl__label {
  transform: translateY(-24px) scale(.78);
  color: $color;
}

02밑줄 확장 포커스

밑줄 역할을 하는 span 하나

테두리 없는 input 아래 span 하나가 밑줄 역할을 합니다.

밑줄 확장 포커스
새 창에서 열기

02 · 밑줄 확장 포커스 — 측정 누적면적 1.592% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

:focus-withinscaleX300ms

가운데서 좌우로 퍼지는 값

부모 .ug 가 :focus-within 이면 transform-origin을 center로 둔 채 scaleX(0)에서 scaleX(1)로 자라 가운데서 좌우로 퍼지는 밑줄이 됩니다.

밑줄이 1 을 지나 잠깐 더 뻗었다가 감아 들어가는 스프링 오버슛(cubic-bezier(.2, 1.5, .35, 1))과 함께, 포커스 순간 밑줄 아래 타원형 radial 글로우가 한 번 퍼졌다 사라집니다.

.ug__underline {
  height: 2px;
  background: $color;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform $duration $easing;
}

.ug:focus-within .ug__underline { transform: scaleX(1); }

03:has(:focus) 글로우

글로우 링은 어디에 있나

글로우 링은 input의 형제가 아니라 바깥에 따로 있는 span입니다.

:has(:focus) 글로우
새 창에서 열기

03 · :has(:focus) 글로우 — 측정 누적면적 6.35% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

:has()opacity scale2s 루프

포커스가 유지되는 동안만

부모 .fg가 :has(.fg__input:focus)로 자식의 포커스 여부를 알아채, 포커스가 유지되는 동안만 이 링이 opacity·scale로 숨 쉬듯 커졌다 작아집니다.

포커스가 시작되는 순간 링이 scale(.8)에서 1.08을 지나 .92로 감아 들어가는 스프링 진입(glow-in)이 한 번 지나간 뒤, 그 자리에서 숨 쉬는 맥동이 이어집니다.

.fg__glow {
  border: 2px solid $color;
  opacity: 0;
  transform: scale(.92);
}

.fg:has(.fg__input:focus) .fg__glow {
  animation: glow-pulse $duration $easing infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: .35; transform: scale(.92); }
  50%      { opacity: .9;  transform: scale(1.04); }
}

04검색창 확장

css 검색창 디자인이 넓어지는 폭

알약 모양 검색창은 평소 148px 로 좁게 접혀 있다가, label 전체가 :focus-within 이 되는 순간 240px 로 넓어집니다.

폭이 240px 을 지나 살짝 더 뻗었다가 정돈되는 스프링 오버슛(cubic-bezier(.3, 1.4, .4, 1))이 붙었고, 넓어지는 순간 입력창 안쪽에 radial 글로우가 한 번 번집니다.

검색창 확장
새 창에서 열기

04 · 검색창 확장 — 측정 누적면적 7.744% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

:focus-withinwidth300ms

아이콘 폰트 없이 그린 돋보기

왼쪽 돋보기는 원과 선 하나로 그린 인라인 SVG 라 아이콘 폰트가 없어도 잘리지 않습니다.

.se {
  width: 148px;
  transition: width $duration $easing, border-color $duration $easing;
}

.se:focus-within {
  width: 240px;
  border-color: $color;
}

05플레이스홀더 슬라이드

진짜 placeholder 를 비워 두는 까닭

진짜 placeholder 속성은 빈 칸 하나로 비워 두고, 겹쳐 놓은 span이 화면에 보이는 안내문 역할을 대신합니다.

플레이스홀더 슬라이드
새 창에서 열기

05 · 플레이스홀더 슬라이드 — 측정 누적면적 7.516% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

:placeholder-showntranslate opacity220ms

겹쳐 놓은 span 이 밀려나는 값

input이 포커스되거나 값이 생기면 이 span이 오른쪽으로 밀리며 투명해집니다.

안내문은 13px 밀려나며 scale(.94) 로 잦아드는데, 밀림이 스프링 오버슛(cubic-bezier(.3, 1.6, .4, 1))으로 목표를 지나쳤다가 멎고 포커스 순간 안쪽 radial 글로우가 한 번 번집니다.

.ps__ghost {
  transform: translate(0, -50%);
  transition: transform $duration $easing, opacity $duration $easing;
}

.ps__input:focus ~ .ps__ghost,
.ps__input:not(:placeholder-shown) ~ .ps__ghost {
  transform: translate(10px, -50%);
  opacity: 0;
}

06오류 흔들림

자바스크립트 없이 판정하기

type="email" required input이 값을 채운 뒤에도(:not(:placeholder-shown)) 형식이 틀리면 브라우저의 :invalid 판정만으로 테두리가 흔들리고 X 아이콘이 뜹니다.

흔들림은 진폭이 매 사이클 감소하는 감쇠 진동(x(t) = A·e^(-λt)·sin(ωt) — 1 → .75 → .55 → .34 배)으로 멎고, 오류가 뜨는 순간 프레임에 붉은 radial 글로우가 한 번 번졌다 사라집니다.

오류 흔들림
새 창에서 열기

06 · 오류 흔들림 — 측정 누적면적 2.305% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

:invalidtranslateX600ms

형식이 맞을 때 뜨는 체크

형식이 맞으면 같은 자리에 체크 아이콘이 뜨는데, 자바스크립트는 한 줄도 쓰지 않았습니다.

.ie__input:invalid:not(:placeholder-shown) {
  border-color: $error;
  animation: shake $duration $easing;
}
.ie__input:invalid:not(:placeholder-shown) ~ .ie__icon--bad { transform: translateY(-50%) scale(1); opacity: 1; }
.ie__input:valid:not(:placeholder-shown)   ~ .ie__icon--ok  { transform: translateY(-50%) scale(1); opacity: 1; }

@keyframes shake {
  20%, 80% { transform: translateX($amount); }
  30%, 70% { transform: translateX($amount * -1); }
  50%      { transform: translateX($amount * -.7); }
}

07커스텀 셀렉트 오픈

네이티브 select 를 버린 이유

네이티브 select는 옵션 목록 디자인을 손댈 수 없어서, 이 항목은 button과 ul[role=listbox]을 직접 짰습니다.

커스텀 셀렉트 오픈
새 창에서 열기

07 · 커스텀 셀렉트 오픈 — 측정 누적면적 18.322% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

aria-expandedscaleY220ms

5줄 JS 가 여는 목록

버튼 클릭이 is-open 클래스를 토글하는 5줄짜리 JS를 두고, 열릴 때 목록이 scaleY로 펼쳐지며 셰브론이 180도 돕니다.

목록은 scaleY 가 1 을 지나 1.06 까지 뻗었다가 감아 들어가는 스프링 오버슛으로 열리고, 버튼 아래변에서 아래로 번지는 radial 글로우 확산이 열림을 한 번 확인해 줍니다.

.cs__list {
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform $duration $easing, opacity $duration $easing;
}
.cs.is-open .cs__list { transform: scaleY(1); opacity: 1; }

.cs__chevron { transition: transform $duration $easing; }
.cs.is-open .cs__chevron { transform: rotate(180deg); }

08글자 수 카운트

CSS 혼자 셀 수 없는 것

남은 글자 수는 CSS 혼자 셀 수 없어서, textarea의 input 이벤트마다 숫자를 다시 쓰고 is-bump 클래스를 지웠다 붙이는 방식으로 튕기는 느낌을 재생합니다.

튕김은 진폭이 매 반동 감쇠하는 스프링 반동(1.35 → .853 → 1.062 → 1, 감쇠 계수 .42)으로 반대 방향 두 번을 거쳐 멎습니다.

글자 수 카운트
새 창에서 열기

08 · 글자 수 카운트 — 측정 누적면적 1.504% · 움직인 프레임 10/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

maxlengthscale bump140ms

스크린 리더도 따라오게

aria-live="polite"를 걸어 두어 스크린 리더도 변경을 따라옵니다.

.cc__num { display: inline-block; transform: scale(1); }
.cc__count.is-bump .cc__num { animation: bump $duration $easing; }

@keyframes bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

09비밀번호 눈 토글

type 이 실제로 바뀐다

눈 아이콘 버튼을 누르면 input의 type 자체가 password와 text 사이를 실제로 오갑니다.

비밀번호 눈 토글
새 창에서 열기

09 · 비밀번호 눈 토글 — 측정 누적면적 0.572% · 움직인 프레임 6/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

type toggleopacity scale220ms

두 눈 SVG 의 크로스페이드

겹쳐 둔 눈 SVG와 사선 그은 눈 SVG는 is-shown 클래스에 따라 opacity·scale로 자리를 바꿔가며 크로스페이드합니다.

아이콘이 1 을 지나 1.12 까지 뻗었다가 돌아오는 스프링 오버슛으로 교체되고, 토글 버튼 중심에서 radial 글로우가 한 번 번져 눈이 바뀌었음을 확인시켜 줍니다.

.pw__icon {
  transform: scale(1);
  opacity: 1;
  transition: transform $duration $easing, opacity $duration $easing;
}
.pw__icon--off { transform: scale(.5); opacity: 0; }
.pw__eye.is-shown .pw__icon--eye { transform: scale(.5); opacity: 0; }
.pw__eye.is-shown .pw__icon--off { transform: scale(1); opacity: 1; }

어디서 깨지는가 — 함정 하나

옮겨 붙인 뒤 가장 먼저 손대는 건 보통 포커스 색이고, 입력창에 얹을 밝은 색 조합은 청량한 디자인 랜딩 UI 키트의 시트러스 섹션 아홉 개에서 골라 그대로 넣어도 됩니다. 색보다 먼저 걸리는 건 셀렉터 쪽입니다.

:has() 미만 브라우저에서 남는 것

03 글로우와 06 오류 표시는 css input focus 상태를 :has() 로 부모가 감지합니다. Chrome·Edge 105, Safari 15.4, Firefox 121 미만에서는 셀렉터 자체가 무시돼 글로우가 안 뜨고 체크·X 아이콘도 안 바뀌지만, input 은 여전히 멀쩡히 값을 받고 :invalid 자체는 그대로 걸려서 기능이 완전히 죽지는 않습니다. 04 검색창 확장은 width 를 직접 전환하는 몇 안 되는 항목이라, 옆에 다른 요소를 붙여 두면 넓어지는 순간 그 요소가 실제로 밀리는 레이아웃 변화가 일어납니다 — 폭 240px 상한을 둔 이유도 그래서입니다. 이 zip 압축 비밀번호는 4qrx8ve2 이고, 아홉 개 항목 각각의 index.html에는 자동 재생용 스크립트 대신 사람의 클릭·타이핑만 남아 있습니다. 06 에서 required 를 빼면 빈 칸도 :invalid 로 잡혀 페이지를 열자마자 테두리가 붉게 보이니, :not(:placeholder-shown) 을 꼭 같이 걸어야 합니다.

접근성

라벨과 상태를 읽히게 하는 속성

01은 label for로 눈에 보이는 라벨을 스크린 리더용 라벨과 같은 요소로 연결했고, 05는 겹쳐 놓은 안내문 span을 aria-hidden으로 감춰 화면에서만 보이게 하는 대신 스크린 리더에는 input의 type·autocomplete 정보만 전달됩니다. 06의 p role="alert"는 오류 문구가 나타나는 순간을 스크린 리더가 즉시 읽게 하고, 08의 aria-live="polite"는 급하지 않은 변경(글자 수)을 조용히 따라가게 합니다. 07·09는 aria-expanded·aria-pressed를 클릭마다 실제로 갱신해 버튼의 현재 상태를 알립니다. prefers-reduced-motion: reduce에서는 아홉 개 전부 transition·animation을 없애되 최종 상태(라벨 위치, 밑줄 길이, 열린 목록, 바뀐 아이콘)는 그대로 남겨 정보 손실이 없습니다.

@media (prefers-reduced-motion: reduce) {
  .fl__label { transition: none; }
  .ug__underline { transition: none; }
}

이어서 볼 글

css 포커스 테두리와 검색창 말고 다른 CSS 애니메이션은 CSS 애니메이션 카테고리에 모여 있고, 이 사이트가 무엇을 다루는지는 소개에 있습니다.

FAQ

이 아홉 개는 전부 CSS만으로 동작하나요?

01~06은 CSS 상태 선택자만으로 동작하고 자바스크립트가 없습니다. 07 커스텀 셀렉트 오픈, 08 글자 수 카운트, 09 비밀번호 눈 토글 세 개만 각각 5~9줄의 바닐라 JS가 있는데, 셋 다 CSS 혼자서는 절대 할 수 없는 일(목록 열림 토글, 글자 수 세기, type 속성 교체)이라 넣었습니다. 입력창 바깥에서 같은 방식으로 호버·선택 상태만 써서 짜 둔 묶음으로는 CSS 가격표 디자인 애니메이션 9종이 있습니다.

css 입력창 디자인에서 label 없이 placeholder만 써도 되나요?

안 됩니다. placeholder는 값을 입력하는 순간 사라지고 스크린 리더 지원도 라벨만큼 일관되지 않습니다. 01·04·06·08·09는 진짜 label을 뒀고(04는 label이 input을 통째로 감싸는 형태), 05는 placeholder를 빈 칸으로 비운 대신 화면에 보이는 안내문을 장식용 span(aria-hidden)에만 맡겨 스크린 리더에는 input의 autocomplete 정보만 남습니다.

React 판에서도 :focus-within 같은 선택자가 그대로 동작하나요?

네. CSS Module로 컴파일돼도 :focus :focus-within :placeholder-shown :valid :invalid 같은 브라우저 상태 선택자는 그대로 살아 있습니다. React 쪽에서 useState로 관리하는 건 07의 열림 여부, 08의 입력값, 09의 표시 여부처럼 CSS가 알 수 없는 상태뿐이고, 포커스·유효성 판정은 여전히 브라우저가 합니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.