리액트 애니메이션 라이브러리 없이 쓰는 CSS 9종
리액트로 만든 화면에 자연스러운 움직임을 넣고 싶을 때 제일 먼저 떠오르는 게 리액트 애니메이션 라이브러리를 까는 일이지만, 사실 컴포넌트가 나타나고 사라지는 타이밍만 잡으면 CSS 만으로 되는 것도 많습니다. 이
읽기호버
동작
cubic-bezier css 이징 커브·스프링 9종 — 복붙용 애니메이션 곡선
버튼을 누르거나 카드가 나타날 때, 움직임이 일정한 속도면 딱딱해 보이고 처음엔 빠르다가 점점 느려지거나 끝에서 살짝 튕기면 자연스럽다. 이 속도 변화를 CSS 에서 숫자 네 개로 적는 방법이 cubic-bezier
벤토 그리드 레이아웃 호버 애니메이션 9종
포트폴리오나 제품 소개 페이지에서 크고 작은 네모 칸이 사진 콜라주처럼 이어 붙은 레이아웃을 본 적 있으신가요? 이런 벤토 그리드 레이아웃에 마우스를 올렸을 때 칸마다 살짝 반응하게 만드는 CSS 코드를 아홉 가지로
CSS 글로우 효과 9종 — 네온사인처럼 빛나는 버튼과 텍스트
CSS 글로우 효과는 버튼이나 글자 주위에 빛이 번지는 것처럼 보이게 만드는 장식이다. 네온사인처럼 빛나 보이지만 이미지나 동영상이 아니라 코드 몇 줄로 만든다. 한 줄 복붙으로 그대로 옮겨 쓸 수 있는 CSS 글로
CSS 텍스트 강조 애니메이션 9종 — 한 줄 복붙으로
CSS 텍스트 강조 애니메이션은 본문 속 한 단어나 문장에 형광펜·밑줄·취소선 같은 시각 효과를 얹어 읽는 사람의 시선을 그 자리에 멈추게 하는 기법입니다. 아홉 가지를 모았고, 전부 자바스크립트 없이 순수 CSS
Tailwind 애니메이션 유틸 9종(v4) — 한 줄 복붙으로
Tailwind 애니메이션은 tailwind.config.js가 아니라 CSS 파일 안 @theme 블록에 --animate- 변수와 @keyframes를 같이 적어서 만드는 Tailwind v4의 새 방식입니다.
CSS 아이콘 애니메이션 9종 — SVG 로고도 한 줄 복붙으로
CSS 아이콘 애니메이션은 재생·알림·새로고침처럼 화면에 흔한 인터페이스 아이콘을 인라인 SVG로 그려 움직이게 만드는 것이다. 문자 글리프 대신 좌표가 있는 path를 쓰므로 서체가 바뀌어도 모양이 깨지지 않는다.
CSS 입력창 검색창 포커스 애니메이션 9종 — 한 줄 복붙으로
CSS 입력창 애니메이션은 클릭하기 전·클릭한 순간·값을 다 채운 뒤까지 브라우저가 이미 쥐고 있는 :focus :focus-within :placeholder-shown :valid :invalid 상태를 그대로
CSS 테두리 애니메이션 9종 — 한 줄 복붙으로
CSS 테두리 애니메이션은 카드나 입력창의 가장자리를 움직여 지금 상태를 알리는 기법입니다. 아홉 개를 한 번에 모았고, 대각선 줄무늬가 흐르는 것부터 SVG로 그려지는 것, 필터로 색이 순환하는 것까지 전부 다른
CSS 하트 애니메이션 좋아요·별점 9종 — 한 줄 복붙으로
CSS 하트 애니메이션 아홉 개를 한 번에 모았습니다. 좋아요 버튼의 하트부터 별점 입력, 박수·이모지 리액션까지 누르고 고르는 순간 화면이 확실히 반응하는 장면만 골랐고, 전부 transform과 opacity만