39 patterns · HTML + CSS first

Motion Index

실무에서 자주 쓰는 웹 애니메이션 39가지입니다. 썸네일에 마우스를 올리면 재생되고, 제목을 누르면 코드와 브라우저 지원 범위를 볼 수 있습니다. 모든 예제는 순수 HTML·CSS와 vanilla JS로 작성해서 어떤 프레임워크에도 옮겨 쓸 수 있습니다.

CSS
JS 없이 동작합니다.
JS
상태를 바꿀 때만 JS를 씁니다. 움직임은 CSS가 만듭니다.
Composite
위치·크기·투명도만 바뀌어 가장 가볍습니다.
Paint
매 프레임 화면을 다시 그려서 조금 무겁습니다.
Layout
매 프레임 배치를 다시 계산해서 가장 무겁습니다.

지원 범위 출처: web-features 데이터 (2026-09-30 조회)

기법

15

어떤 요소에도 붙여 쓸 수 있는 애니메이션 방법입니다.

  • NEW
    마우스를 올리면 재생

    Spring easing 생성기

    스프링처럼 튕기는 움직임 곡선을 만듭니다.

    CSSComposite
  • 새 시즌 컬렉션
    마우스를 올리면 재생

    Clip-path reveal

    가려 둔 부분을 조금씩 열어 요소를 드러냅니다.

    CSSPaint

  • 작은 움직임이 경험을 바꿉니다

    단어마다 조금씩 늦게 올라옵니다

    마우스를 올리면 재생

    단어 단위 텍스트 reveal

    단어가 하나씩 아래에서 올라옵니다.

    CSSComposite
  • 앞면
    뒷면
    7 7 7 7
    직접 눌러 보세요

    3D flip

    카드와 플립 시계를 3D로 뒤집습니다.

    JSComposite
  • Pro 플랜

    마우스를 따라 기울어지고 빛이 비칩니다.

    카드 위에서 마우스를 움직여 보세요

    포인터 따라 기울기 · 조명

    카드가 마우스 쪽으로 기울고, 마우스 위치에 빛이 비칩니다.

    JSPaint
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    직접 눌러 보세요

    FLIP

    위치가 바뀌는 요소를 부드럽게 옮겨 줍니다.

    JSComposite
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    직접 눌러 보세요

    View Transitions

    화면을 바꾸는 코드를 감싸기만 하면 브라우저가 전환을 만들어 줍니다.

    JSComposite

  • 아래로 스크롤해 보세요 ↓

    1. 01 기획
    2. 02 디자인
    3. 03 개발
    4. 04 테스트
    5. 05 출시

    섹션이 끝나면 다시 세로로 스크롤됩니다

    스크롤해 보세요

    가로 스크롤 섹션

    아래로 스크롤하는 동안 카드가 옆으로 지나갑니다.

    CSSComposite
  • 마우스를 올리면 재생

    Motion path

    요소가 정해 둔 곡선을 따라 이동합니다.

    CSSComposite
  • 직접 눌러 보세요

    Shape morph

    아이콘과 도형의 모양이 부드럽게 바뀝니다.

    JSPaint
  • ,원
    직접 눌러 보세요

    Odometer 숫자 롤링

    자리마다 숫자가 굴러가며 새 값으로 바뀝니다.

    JSComposite
  • $ npm run dev Motion Index
    마우스를 올리면 재생

    Typewriter

    글자가 한 자씩 찍히고 커서가 깜빡입니다.

    CSSLayout
    • 봄
    • 여름
    • 가을
    • 겨울
    • 다시 봄
    옆으로 스크롤해 보세요

    Scroll-snap 캐러셀

    가운데에 온 항목만 크고 선명하게 보입니다.

    CSSComposite

  • 새로운 시작

    마우스를 올리면 재생

    배경 gradient drift

    흐린 색 덩어리가 천천히 떠다니는 배경입니다.

    CSSComposite

컴포넌트

24

자주 쓰는 UI 부품에 맞춘 애니메이션입니다.

  • 새 알림 3건

    지난 접속 이후 업데이트가 있습니다.

    마우스를 올리면 재생

    페이드 업 등장

    요소가 아래에서 살짝 떠오르며 나타납니다.

    CSSComposite
    • 김하늘님이 참여했습니다
    • 이서준님이 참여했습니다
    • 박지우님이 참여했습니다
    마우스를 올리면 재생

    순차 등장 (Stagger)

    목록 항목이 짧은 간격을 두고 차례로 나타납니다.

    CSSComposite

  • 아래로 스크롤해 보세요 ↓

    1단계

    계정을 만듭니다.

    2단계

    팀원을 초대합니다.

    3단계

    프로필을 채웁니다.

    4단계

    첫 프로젝트를 만듭니다.

    5단계

    작업을 나눠 맡깁니다.

    6단계

    진행 상황을 확인합니다.

    7단계

    피드백을 주고받습니다.

    8단계

    결과를 공유합니다.

    스크롤해 보세요

    스크롤 등장

    스크롤해서 화면에 들어올 때 나타납니다.

    CSSComposite
  • 직접 눌러 보세요

    버튼 hover · press

    마우스를 올리면 떠오르고, 누르면 살짝 작아집니다.

    CSSPaint
  • 직접 눌러 보세요

    토글 스위치

    켜고 끌 때 손잡이가 살짝 튕기며 이동합니다.

    CSSPaint

  • 결제가 완료되었습니다

    마우스를 올리면 재생

    체크 표시 그리기

    원과 체크 표시를 차례로 그립니다.

    CSSPaint
  • 마우스를 올리면 재생

    스켈레톤 shimmer

    콘텐츠를 불러오는 동안 빛이 지나가는 자리 표시자입니다.

    CSSComposite
  • 마우스를 올리면 재생

    로딩 스피너

    테두리 한쪽만 색이 다른 원이 돕니다.

    CSSComposite

  • 변경 사항을 저장할까요?

    저장하지 않으면 수정한 내용이 사라집니다.

    직접 눌러 보세요

    모달 열기 · 닫기

    모달이 열릴 때와 닫힐 때 모두 부드럽게 전환됩니다.

    JSComposite

  • 공유하기

    손잡이를 아래로 끌어내리거나 바깥을 누르면 닫힙니다.

    직접 눌러 보세요

    Bottom sheet

    아래에서 올라오고, 손잡이를 끌어내리면 닫힙니다.

    JSComposite

  • 결제 후 1~2일 안에 출발합니다.

    받은 날부터 7일 안에 신청할 수 있습니다.

    직접 눌러 보세요

    아코디언

    내용 높이를 몰라도 부드럽게 펼치고 접습니다.

    JSLayout
  • 직접 눌러 보세요

    토스트 알림

    화면 아래에서 올라왔다가 잠시 후 사라집니다.

    JSComposite

  • Core Web Vitals 정리

    LCP는 가장 큰 콘텐츠가 그려지는 시점입니다. 2.5초 이내를 목표로 합니다.

    INP는 사용자 입력에 화면이 반응하기까지 걸리는 시간입니다. 200ms 이내가 좋은 수준입니다.

    CLS는 레이아웃이 예고 없이 밀리는 정도입니다. 0.1 이하로 유지합니다.

    세 지표 모두 실제 사용자 데이터의 75번째 백분위수로 판단합니다.

    애니메이션을 transform과 opacity로 만들면 INP와 CLS에 영향을 주지 않습니다.

    스크롤해 보세요

    읽기 진행률 바

    스크롤한 만큼 상단 바가 채워집니다.

    CSSComposite
  • ReactVueSvelteAstroSolid
    마우스를 올리면 재생

    로고 마퀴 (Marquee)

    로고 띠가 끊김 없이 옆으로 흘러갑니다.

    CSSComposite
  • 가입자
    만족도(%)
    마우스를 올리면 재생

    숫자 카운트업

    숫자가 0부터 목표 값까지 올라갑니다.

    CSSLayout
  • Pro 플랜

    월 9,900원 · 언제든 해지

    마우스를 올리면 재생

    회전 그라디언트 테두리

    카드 테두리의 그라디언트가 천천히 돕니다.

    CSSPaint
  • 직접 눌러 보세요

    입력 오류 흔들기

    잘못 입력하고 제출하면 입력란이 좌우로 흔들립니다.

    JSComposite
  • 직접 눌러 보세요

    Popover 드롭다운

    JS 없이 HTML 속성만으로 열고 닫는 메뉴입니다.

    CSSLayout
  • 링크를 복사해 다른 사람에게 보냅니다
    버튼에 마우스를 올려 보세요

    Tooltip

    잠시 머무르면 나타나고, 마우스를 옮겨도 바로 사라지지 않습니다.

    JSComposite
  • 직접 눌러 보세요

    탭 indicator 슬라이드

    선택한 탭으로 배경이 미끄러져 이동합니다.

    JSPaint
  • 직접 눌러 보세요

    좋아요 하트 burst

    누르면 하트가 튀어 오르고 주변으로 조각이 퍼집니다.

    JSPaint
  • 72%
    35%
    마우스를 올리면 재생

    진행률 링

    원형 테두리가 목표 비율까지 채워집니다.

    CSSPaint
  • 마우스를 올리면 재생

    Typing indicator

    채팅의 "입력 중" 점 세 개가 차례로 튀어 오릅니다.

    CSSComposite
  • 직접 눌러 보세요

    Ripple 버튼

    누른 위치에서 물결이 퍼집니다.

    JSComposite

값 조정

바꾼 값은 아래 코드에 바로 반영됩니다.