💡 CSS 애니메이션, 키프레임과 이징으로 부드럽게 만드는 법

사이트에 움직임을 넣을 때 가장 쓰기 쉬운 방법이 CSS 애니메이션입니다. 다만 기본 ease-in·ease-out만 쓰면 움직임이 딱딱하게 느껴질 수 있습니다. 조금 더 자연스럽게 만들려면 cubic-bezier 같은 이징 값과 @keyframes를 같이 쓰는 편이 좋습니다. 이 생성기는 자주 쓰는 모션 프리셋과 이징을 고르면 CSS 코드를 바로 뽑아 줍니다.

같은 페이지에서 트랜지션용 cubic-bezier만 따로 맞출 수도 있습니다. Ease·Ease-In/Out·Elastic·Anticipate·Soft Back 프리셋이나 X1·Y1·X2·Y2를 직접 넣으면, transition에 붙일 코드와 미리보기를 보여 줍니다.

📊 모션 프리셋별 추천 이징

만들고 싶은 분위기에 맞춰 어떤 이징을 쓰면 좋은지 아래 표를 참고해 보세요. CSS 키프레임 뼈대는 같고, 곡선만 바꿔도 느낌이 많이 달라집니다.

* 위 값은 자주 쓰는 참고용입니다. 모바일에서는 표를 좌우로 밀어 보세요.

📌 cubic-bezier 네 점

가로(X)는 경과 시간 비율(0~1), 세로(Y)는 진행 비율입니다. 시작 (0,0)과 끝 (1,1)은 고정이고, 두 제어점이 곡선을 당깁니다. X는 0~1이어야 하고, Y는 0 미만·1 초과도 됩니다. Y2를 1보다 크게 두면 Soft Back처럼 목표를 살짝 넘겼다 정착하고, Y1을 0보다 작게 두면 Anticipate처럼 출발 전 살짝 뒤로 가졌다가 나갑니다.

모달·드롭다운처럼 “열렸다”는 느낌이 중요하면 Soft Back·Elastic Pop이, 배경 페이드처럼 눈의 피로를 줄이려면 Ease·Ease-Out이 무난합니다. 같은 곡선이라도 duration이 다르면 느낌이 달라지니, 버튼은 짧게·큰 패널은 조금 길게 맞춰 보세요.

📌 이징과 alternate

무한 반복할 때 끝에서 처음으로 순간 이동하면 뚝 끊겨 보일 수 있습니다. 부유·펄스처럼 왕복이 자연스러운 프리셋에는 alternate를 넣어, 올라갔다가 다시 내려오게 했습니다.

🚀 끊김을 줄이려면 transform·opacity 위주로

top·left·margin을 키프레임으로 움직이면 레이아웃을 다시 계산해 저사양 기기에서 끊기기 쉽습니다. transform과 opacity 위주로 짜는 편이 안전합니다. 이 생성기의 키프레임도 그 기준입니다. cubic-bezier 미리보기는 데모용으로 left를 쓰니, 실제 프로젝트에서는 움직이는 속성에 맞게 transition을 작성하세요.

복사한 CSS를 스타일시트에 붙인 뒤, 대상에 .motion-item 클래스를 주면 됩니다. 움직임이 부담스러운 사용자를 위해 prefers-reduced-motion으로 애니메이션을 끄는 예시도 코드에 포함해 두었습니다.