CSS 애니메이션 생성기 (@keyframes)

움직임 고르기

색

재생 시간 지연

반복 무한 반복

방향 채우기

속도 곡선 (easing)

cubic-bezier

클래스 이름 '동작 줄이기(prefers-reduced-motion)' 사용자에게는 끄는 코드 넣기

HTML 요소에 클래스를 붙이면 바로 움직여요. 예: <div class="animate">

이 브라우저 안에서만 처리돼요. 서버로 보내지 않아요.

알아 두세요. 움직임이 크거나 깜빡이는 애니메이션은 어지럼증을 줄 수 있어요. '동작 줄이기' 대응 코드를 함께 넣는 걸 권해요.

사용 방법

위에서 움직임(나타나기 · 바운스 · 흔들기 · 심장 박동 등)을 골라요. 미리보기가 바로 재생돼요.

재생 시간 · 지연 · 반복 · 방향 · 채우기(fill-mode)를 정해요.

속도 곡선을 고르거나 cubic-bezier 네 값을 직접 넣어 곡선을 보며 조절해요.

클래스 이름을 정하고, 동작 줄이기 대응 코드를 넣을지 고른 뒤 코드 복사를 눌러요.

자주 묻는 질문

fill-mode는 언제 바꿔요?

나타나기처럼 끝난 모습을 유지해야 하면 forwards나 both를 써요. none이면 애니메이션이 끝난 뒤 원래 스타일로 돌아가요.

cubic-bezier 값은 어떻게 정해요?

첫째 · 셋째 값(x)은 0~1, 둘째 · 넷째 값(y)은 1보다 크거나 0보다 작게 줄 수 있어요. y가 1을 넘으면 살짝 지나쳤다 돌아오는 느낌이 나요.

prefers-reduced-motion 코드는 왜 넣어요?

기기에서 '동작 줄이기'를 켠 사람은 큰 움직임에 어지럼증을 느낄 수 있어요. 이 코드는 그런 사용자에게만 애니메이션을 꺼요.